CSS 줄임표가 작동하지 않는 경우 수행할 작업
- 藏色散人원래의
- 2020-11-20 11:41:313973검색
CSS 줄임표가 작동하지 않는 경우: 먼저 CSS를 연 다음 "overflow:hidden;" 및 "white-space:nowrap;width:150px;"와 함께 "text-overflow:ellipsis" 속성을 사용하세요.
권장 사항: "css 비디오 튜토리얼"
Css 속성 text-overflow:ellipsis가 작동하지 않는 문제를 해결하세요(텍스트 오버플로는 생략 부호를 표시합니다)
text-overflow:elipsis를 작동시키세요:
If CSS 속성 text-overflow:elipsis를 사용하려면overflow:hidden;white-space:nowrap;width:150px;
1.text-overflow 구문:
text-overflow : clip | ellipsis
2. -overflow 매개변수 설명:
clip: 생략 기호(...)를 표시하지 않고 간단히 잘라냅니다.
elipsis: 개체의 텍스트가 오버플로될 때 생략 기호(...)를 표시합니다.
3. 사용:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<style type="text/css">
.test{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:150px;
}
</style>
<body>
<ul id="textFlow">
<li class="test"><a href="#">第一标题：奇艺之旅</a></li>
<li class="test"><a href="#" title="第二标题：萨迪斯的项圈的奇闻异事">第二标题：萨迪斯的项圈的奇闻异事</a></li>
<li class="test"><a href="#" title="第三标题：杜斯的奇妙之旅。测试数据。测试数据">第三标题：杜斯的奇妙之旅。测试数据。测试数据 </a></li>
</ul>
</body></html>위 내용은 CSS 줄임표가 작동하지 않는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 스트로크 속성이란 무엇입니까?다음 기사：CSS 스트로크 속성이란 무엇입니까?