여러 줄의 텍스트 오버플로에 줄임표(…)가 표시됩니다.

<a href="//m.sbmmt.com/wiki/868.html" target="_blank">text-</a><a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:ellipsis 속성 은 한 줄의 텍스트에서 줄임표(…)의 오버플로 표시를 구현하는 데 사용된다는 점을 모두가 알아야 합니다. 물론 일부 브라우저에서는 width <a href="//m.sbmmt.com/wiki/835.html" target="_blank">width<code><a href="//m.sbmmt.com/wiki/835.html" target="_blank">width</a> 속성도 추가해야 합니다. .

css 코드:

1. overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

   로그인 후 복사

그러나 이 속성은 여러 줄 텍스트를 지원하지 않습니다. Overflow 여기에서는 애플리케이션 시나리오를 기반으로 이 효과를 달성하는 여러 가지 방법을 소개합니다.

WebKit 브라우저 또는 모바일 페이지

WebKit 브라우저 또는 모바일 터미널(대부분의 WebKit 코어가 있는 브라우저)에서 페이지 구현은 비교적 간단하며 WebKit의 CSS 확장 속성(WebKit은 개인 속성) -webkit-line-clamp; 참고: 이는 지원되지 않는 WebKit 속성이며 CSS 사양 초안에는 나타나지 않습니다.

-webkit-line-clamp은 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다.
공통 조합 속성:

1. <a href="//m.sbmmt.com/wiki/927.html" target="_blank">디스플레이 <code><a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: -webkit-box;: -webkit-box; 객체를 탄력적으로 확장 가능한 박스 모델으로 표시하기 위해 결합해야 하는 속성입니다.

2. -webkit-box-orient 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 결합해야 하는 속성입니다.

3. text-overflow: ellipsis;은 여러 줄 텍스트의 경우 줄임표 "..."를 사용하여 범위를 벗어난 텍스트를 숨기는 데 사용할 수 있습니다.

css 코드:

1. overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

   로그인 후 복사

이 속성은 적합한 WebKit 브라우저 또는 모바일 브라우저(주로 WebKit 기반) 브라우저.

구체적인 예는 //m.sbmmt.com/을 확인하세요

크로스 브라우저 호환 솔루션

더 안정적이고 간단한 방법은 상대적으로 배치된 컨테이너 높이, 타원(…)을 포함하는 요소로 시뮬레이션

예:

css 코드:

1. p {
       position:relative;
       line-height:1.4em;
       /* 3 times the line-height to show 3 lines */
       height:4.2em;
       overflow:hidden;
   }
   p::after {
       content:"...";
       font-weight:bold;
       position:absolute;
       bottom:0;
       right:0;
       padding:0 20px 1px 45px;
       background:url(//m.sbmmt.com/) repeat-y;
   }

   로그인 후 복사

여기서 몇 가지 참고 사항:

1. 키가 <🎜의 3배로 정말 좋습니다. >; line-height

2. 끝 부분을 생략하고 반투명 png를 사용하여 밝게 하거나 배경색을 설정하는 것이 쉽습니다.

3. IE6 -7은

   콘텐츠를 표시하지 않으므로 IE6-7과 호환되도록 content을 사용하여 <span class="line-clamp">...</span>

4. 하는 등 콘텐츠에 태그를 추가할 수 있습니다. IE8을 지원하려면

   을 ::after;:after

JavaScript 솔루션

js을 사용하여 교체해야 합니다. 또한 위의 아이디어에 따라 시뮬레이션할 수 있으며 구현도 매우 간단합니다. 유사한 작업을 위해 여러 가지 성숙한 소형 도구를 권장합니다.

사용 방법도 매우 간단합니다:

js

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

로그인 후 복사

jQuery

이것도 사용하기 매우 편리합니다. :

js

$(document).ready(function() {
$("#wrapper").dotdotdot({
//configuration goes here
});
});

로그인 후 복사

위 내용은 여러 줄의 텍스트 오버플로에 줄임표(…)가 표시됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!