Home > Article > Web Front-end > What to do if css ellipsis doesn’t work
What to do if css ellipsis doesn’t work
- 藏色散人Original
- 2020-11-20 11:41:313899browse
Solution to css ellipsis not working: First open css; then add the properties "text-overflow:ellipsis" together with "overflow:hidden;" and "white-space:nowrap;width:150px;" Just use it.
Recommendation: "css video tutorial"
Solution to Css attribute text-overflow: ellipsis does not work (text overflow displays ellipses)
Make text-overflow:elipsis work:
If you want to use the css attribute text-overflow:elipsis to work, the style must Use with overflow:hidden; white-space:nowrap;width:150px;
1. Text-overflow syntax:
text-overflow : clip | ellipsis
2. Text-overflow parameter description:
clip: Do not display the omission mark (...), but simply crop it
elipsis: Display the omission mark (...) when the text in the object overflows
3. Simple Use:
<!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>The above is the detailed content of What to do if css ellipsis doesn’t work. For more information, please follow other related articles on the PHP Chinese website!