2줄을 초과하는 CSS 부분의 타원에 대한 솔루션
- 高洛峰원래의
- 2017-03-16 09:56:202502검색
오늘 작업을 하다가 이런 문제가 발생했습니다. 바이두에 정리해서 이런 결과가 나왔습니다.
우선 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('demo');
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+'...';
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>
위 내용은 2줄을 초과하는 CSS 부분의 타원에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.