CSS에서 표시 누락을 초과하는 한 줄 및 여러 줄 텍스트 효과를 얻는 방법

이 글의 내용은 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 = []; //定义一个空数组
$（&#39;.box&#39;）。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） + &#39;…&#39;; //添加省略号并放进box文字内容后面
$（".box"）。eq（i）。text（content）；
} else {

위 내용은 CSS에서 표시 생략 효과를 넘어 한 줄 및 여러 줄 텍스트를 구현하는 방법에 대한 전체 소개입니다.

CSS3 튜토리얼#🎜 🎜#, PHP 중국어 넷을 주목해주세요.

위 내용은 CSS에서 표시 누락을 초과하는 한 줄 및 여러 줄 텍스트 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!