JavaScript는 컨테이너를 초과 한 후 타원 효과를 표시합니다
실제 프로젝트에서 텍스트 내용의 길이의 불확실성과 페이지 레이아웃의 고정성으로 인해 텍스트 내용이 DIV (또는 다른 태그, 아래의 다른 태그) 영역을 초과하는 것은 불가피합니다. 이 시점에서 더 좋은 방법은 텍스트가 제한된 div 너비를 초과 할 때 엘리석시스 (…)에 자동으로 표시하는 것입니다. 이런 식으로 관습에 따르면 사람들은 여기에 생략 된 텍스트가 있다는 것을 알게 될 것입니다. CSS에는 Text-Overflow : Ellipsis라는 속성이 있습니다. 예를 들어 CSS를 사용하여 이와 같이 쓸 수 있습니다.
{너비 : 27EM; 흰색 공간 : Nowrap; 텍스트 오버 플로우 : 일방시스; -o-텍스트-오버 플로우 : 엘립스 시스; 오버플로 : 숨겨진;} 텍스트 오버 플로우 타원은 Firefox 브라우저에서만 구현할 수 없으며 텍스트는 중간에서 직접 삭제됩니다. CSS를 사용하여이를 구현하는 방법에 대해서는 이야기하지 않습니다. 특정 CSS 구현은 Baidu에서 사용할 수 있습니다. 여기서 가장 중요한 것은 JS로 구현하는 방법과 JS를 통해 간단한 구성 요소를 작성하는 방법입니다. JS의 초기화 방법을 직접 호출하여 구현할 수 있습니다! 예를 들어 다음 효과는 다음과 같습니다.
뒤쪽의 점과 점은 사용자에게 그러한 효과를 완료하기 위해 표시되지 않은 더 많은 컨텐츠가 있음을 프롬프트합니다!
먼저 말도 안되는 말을 덜 말하십시오! 먼저, 내가 만든 데모 효과를 살펴보고 당신은 그것이 무엇인지 이해할 것입니다!
효과를보고 싶다면 저를 클릭하십시오! 좋아요?
1 : 구성 요소 구성 항목을 먼저 살펴 보겠습니다.
대상
NULL, 대상에 의해 컨테이너를 가로 채는 데 필요한 항목은 기본적으로 NULL입니다.
LimitlinEnumber 1, 표시 할 행 수는 기본적으로 1 줄입니다.
타입 '...', 컨테이너 길이를 초과하는 유형은 기본적으로 타원체에 표시됩니다.
LineHeight 18, DOM 노드의 기본 라인 높이는 18입니다.
ISSHOWTITLE TRUE 모든 내용을 표시하려면 제목이 필요합니다. 기본값은 사실입니다
ischarlimit 캐릭터의 길이에 따라 타원을 표시하는 오 탐지
MAXLENGTH 20 기본 길이는 20입니다. 문자 20을 초과 한 후에는 타원이 표시됩니다.
둘 : 분석
1. 첫째,이 구성 요소에 대해 이야기 해 봅시다. 문자열을 가로 채는 두 가지 방법을 지원하십시오. 첫째 : 캐릭터의 길이에 따라 가로 채고 타원을 초과 한 후에 타원을 표시하십시오. 예를 들어, 나는 이것을 다음과 같이 부릅니다.
새로운 multiellipsis ({
"대상": '.text8',
"ischarlimit": 사실,
"MaxLength": 18
});
이러한 방식으로 초기화는 Charlimit이 사실임을 의미하며 이는 문자 수를 가로 채는 것을 의미합니다. 최대 길이의 최대 길이는 18입니다. 초기화 이런 방식으로 초기화는 코드가 먼저 IsCharlimit이 true인지 결정하기 때문에 다음 코드와 같은 문자 수에 따라 직접 가로 채 웁니다.
2. 두 번째 유형은 행의 수와 높이에 따라 가로 채 웁니다. 예를 들어, 기본 구성 항목의 선 높이는 18입니다. 2 행, 즉 높이 h = 18*2를 표시하려면. 컨테이너의 높이가 100 인 경우 가로 채는 방법은 다음과 같습니다.
사용 (100- 유형의 길이 -1) 18 × 2보다 큰지 여부에 관계없이, 그보다 더 큰 경우 계속 가로 채면 가로 채지 않으면 타원 효과가 표시됩니다! 다음 코드 :
단점 : 그러나 하이 로우 인터셉트를 사용하는 경우 데이터가 상대적으로 작 으면 괜찮지 만 500 픽셀 이상의 높이와 같은 많은 데이터가 있으면 성능에 상대적으로 영향을 미칩니다. 매번 n 번 계산해야하기 때문에 (n은 호출을 루프하는 많은 기능이 있음을 의미합니다).
모든 JS 코드는 다음과 같습니다.
코드를 복사하십시오
/ * * js * @author tugenhua를 기반으로 한 다중 엘리프 시스 */ 함수 multiellipsis (옵션) {var self = this; self.options = $ .extend ({}, 기본값, 옵션 || {}); self._init (); } $ .extend (multiellipsis.prototype, {// page initialization_init : function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + "") [0] === undefined) {constole.log (window.console) {window.console) { 빈! ");} return;} if (cfg.isshowTitle) {// 요소 var var var var var var var var var var var var var var var var gettext (); $ (cfg.targetcls) .attr ({title": title})의 텍스트를 얻으려면 제목 속성을 추가합니다. } self._compareHeight (cfg.lineHeight * cfg.limitlineNumber), / * * * @Method _CharCompare {private} * 텍스트를 비교합니다. if (text.length> cfg.maxlength) {var curtext.substring (0, cfg.maxlength); html 컨텐츠 직접 * @method getText {public} */ getText : function () {var self = this, cfg = self.options ($ ($ (cfg.targetcls + ") [0]). = cfg = self.options; $ (cfg.targetcls + ") [0] ") [0] maxlineHeight) {self._deletetext (self.getText ())}; text.substring (0, typelen -1); function () {var self = cfg = self.options $ ($ (cfg.targetcls + "). var defaults = { 'targetcls': null, // target'LimitlinEnumber ': 1, // 행의 수* 라인의 행 높이> = 컨테이너의'유형 ':'... ', // 기본적으로 표시되는 유형은 기본적으로 표시된 선입니다. Node'isshowTitle ': true, // 제목이 모든 컨텐츠를 표시하는지 기본적으로'ISCHARLIMIT ': FALLE, // 디스플레이 ELLIPSIS는 문자'maxLength '의 길이에 의해 제한됩니다. 20 // 기본값은 20};JavaScript가 컨테이너를 초과 한 후 엘리석시 효과를 표시하는 위의 방법 (한 줄 또는 여러 줄과 호환)은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.