2줄을 초과하는 CSS 부분의 타원에 대한 솔루션-CSS 튜토리얼-php.cn

2줄을 초과하는 CSS 부분의 타원에 대한 솔루션

高洛峰

풀어 주다： 2017-03-16 09:56:20

원래의

2510명이 탐색했습니다.

오늘 작업을 하다가 이런 문제가 발생했습니다. 바이두에 정리해서 이런 결과가 나왔습니다.

우선 CSS 의 세 가지 속성을 알아야 합니다.

overflow:hidden; //과잉 텍스트는 숨겨집니다

text-overflow:ellipsis; >

white-space:nowrap; //overflow 시 줄 바꿈 없음

이 세 가지는 CSS의 기본 속성이며 기억해야 합니다.

그러나 세 번째 속성은 한 줄만 표시할 수 있으며 여기서는 사용할 수 없습니다. 그러면 여러 줄이 표시되면 어떻게 될까요?

css3은 이 문제를 해결합니다.

display:-webkit-box; 🎜 >플렉스 확장 가능한 박스 모델으로 표시됩니다. -webkit-box-orient:vertical; //하위 요소를 위에서 아래로 수직으로 배열합니다(접이식 상자의 하위 요소 배열 설정)

-webkit-line-clamp: 2; //이 속성은 CSS의 표준 속성이 아니며 표시되는 행 수를 나타내기 위해 위의 두 속성을 결합해야 합니다.

최종 CSS 스타일은 다음과 같습니다.

overflow:hidden;

text-overflow:ellipsis;

display: -webkit -box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2

2줄 또는 3줄인 경우 -line 컨테이너, CSS를 사용해서만 이 메서드를 구현할 수 있는 방법은 없다고 생각하세요.

에서는 두 가지 방법을 제공할 수 있습니다. 하나는 출력 시 프로그램을 사용하여 단어를 자르는 것이고, 다른 하나는

를 사용하여 단어 수를 판단하고 자르는 것입니다.

JS 데모는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById(&#39;demo&#39;);
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+&#39;...&#39;;
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>

로그인 후 복사

위 내용은 2줄을 초과하는 CSS 부분의 타원에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!