이 글의 내용은 CSS에서 한 줄과 여러 줄의 텍스트 표시 생략 효과를 얻는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고하면 좋겠습니다. 당신에게.
한 줄 텍스트 생략됨
.ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 }
구문:
text-overflow:clip/ellipsis;
기본값 :clip
적용 대상: 모든 요소
clip: 개체 내 텍스트가 오버플로되는 경우 생략 표시(...)가 표시되지 않지만, 오버플로된 부분은 잘랐다.
ellipsis: 개체 내의 텍스트가 넘칠 때 줄임표(…)를 표시합니다.
사용시 생략표시 효과가 나타나지 않는 경우가 가끔 발견되는데, 테스트 결과 줄임표 사용시 반드시 Overflow:white-space:nowrap; ; width: 특정 값; this 세 가지 스타일을 함께 사용하면 효과적입니다.
여러 줄의 텍스트가 생략됨
WebKit 브라우저에서 CSS 속성-webkit-line-clamp:n을 직접 사용하여
설정 모바일 터미널( WebKit 코어가 있는 대부분의 브라우저의 페이지 구현은 상대적으로 간단합니다. WebKit의 CSS 확장 속성(WebKit은 비공개 속성) - webkit-line-clamp; 참고: 이는 지원되지 않는 WebKit 속성입니다.)을 직접 사용할 수 있습니다. 초안 CSS 사양에는 나타나지 않습니다.
-webkit-line-clamp는 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:
display: -webkit-box; 객체를 유연한 상자 모델로 표시하려면 결합해야 합니다.
-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.
text-overflow: ellipsis;, 여러 줄 텍스트의 경우 줄임표 "..."를 사용하여 범위를 초과하는 텍스트를 숨길 수 있습니다.
이 속성은 WebKit 브라우저 또는 모바일 브라우저(주로 WebKit 코어) 브라우저에만 적합합니다.
.multi-line { border: 1px solid #f70505; width: 400px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
효과는 그림과 같습니다:
#🎜 🎜 #효과 관점에서 장점은 다음과 같습니다. 1 반응형 잘림, 다양한 너비에 따라 조정#🎜 🎜 #2. 줄임표는 텍스트가 범위를 초과할 때만 표시됩니다. 그렇지 않으면 줄임표가 표시되지 않습니다
3. 브라우저가 기본적으로 이를 구현하므로 줄임표 위치가 올바르게 표시됩니다
# 🎜🎜#하지만 단점도 매우 직접적입니다. 왜냐하면 -webkit-line-clamp는 초안 CSS 사양에 나타나지 않는 표준화되지 않은 속성이기 때문입니다. 즉, Webkit Core를 탑재한 브라우저만이 이 속성을 지원합니다. Firefox, IE 등의 브라우저는 이 속성을 지원하지 않으며 브라우저 호환성도 좋지 않습니다. 사용 시나리오: 모바일 장치 브라우저는 호환성이 좋지 않을 뿐만 아니라 잘림 효과도 좋기 때문에 주로 모바일 페이지에 사용됩니다. 위치 지정 및 의사 클래스 요소 사용p{ position: relative; width:400px; line-height: 20px; max-height: 60px; overflow: hidden; } p::after{ content: "…"; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }효과는 다음과 같습니다.
적합한 장면: 텍스트 내용이 많고 텍스트 내용이 컨테이너를 초과할 것이 확실하므로 이 방법을 선택하는 것이 좋습니다. 그러나 텍스트가 선을 초과하지 않는 경우에도 타원이 나타납니다. 이 방법은 js로 최적화할 수 있습니다.
참고: 높이를 줄 높이의 정수배로 설정하여 과도한 텍스트가 노출되는 것을 방지하세요. p::after에 그라데이션 배경을 추가하면 텍스트의 절반만 표시되지 않습니다. ie6-7은 콘텐츠 내용을 표시하지 않으므로 ie6-7과 호환되도록 태그를 추가해야 합니다(예: ...) ;ie8과 호환되려면:after를 :after로 바꿔야 합니다. js 최적화 코드와 결합css: p { position: relative; width: 400px; line-height: 20px; overflow: hidden; } .p-after:after{ content: "…"; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -moz-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(left, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }js:
$(function(){ //获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号 $('p')。each(function(i, obj){ var lineHeight = parseInt($(this)。css("line-height")); var height = parseInt($(this)。height()); if((height / lineHeight) >3 ){ $(this)。addClass("p-after") $(this)。css("height","60px"); }else{ $(this)。removeClass("p-after"); } }); })제어하려면 타사 플러그인을 사용하거나 자체 스크립트를 작성하세요. #🎜🎜 #
Online 여러 줄 텍스트의 오버플로 생략을 달성하기 위해 JavaScript를 사용하는 방법에 대한 소개가 많이 있습니다. 일부는 플러그인을 사용하고 일부는 자체 캡슐화된 JavaScript 파일을 사용하는 것이 더 좋다고 생각합니다. 직접 작성했습니다.
//div <div class="box">北京时间11月18日,苏州太湖马拉松女子比赛中,中国选手何引丽最终获得亚军,落后冠军5秒。但是赛后,何引丽在社交媒体上道歉,称自己最后时刻跑累了,没有拿稳国旗,这究竟是怎么回事?</div> //css .box { width: 400px; height: 40px; border: 1px solid #f70505; line-height: 20px; } //js <script type="text/javascript"> $(function() { var content_arr = []; //定义一个空数组 $('.box')。each(function() { //遍历box内容 var content = $.trim($(this)。text()); //去掉前后文空格 content_arr.push(content); //内容放进数组 }) for (var i = 0; i < content_arr.length; i++) { //遍历循环数组 if (content_arr[i].length >= 50) { //如果数组长度(也就是文本长度)大于等于50(数字可自己定义) content = content_arr[i].substr(0, 50) + '…'; //添加省略号并放进box文字内容后面 $(".box")。eq(i)。text(content); } else {
위 내용은 CSS에서 표시 생략 효과를 넘어 한 줄 및 여러 줄 텍스트를 구현하는 방법에 대한 전체 소개입니다.
CSS3 튜토리얼#🎜 🎜#, PHP 중국어 넷을 주목해주세요.위 내용은 CSS에서 표시 누락을 초과하는 한 줄 및 여러 줄 텍스트 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!