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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
