一、CSS超出顯示省略號
CSS中的text-overflow屬性可以控制當文本溢出容器時的顯示行為。如果設置為ellipsis，就會在文本的末尾顯示三個省略號。
.example1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
這個例子中，設置white-space屬性為nowrap，讓文本在一行內顯示；設置overflow：hidden，超出的文本隱藏；最後設置text-overflow：ellipsis，讓省略號顯示在文本的末尾。
可以將.class-name也可以設置為*，表示該效果將應用於所有元素。
二、CSS超出隱藏
該效果可以通過給定元素設置max-width和overflow：hidden樣式來實現。當元素的內容超出其寬度時，超出部分將隱藏。
.example2 {
max-width: 200px;
overflow: hidden;
}
這個例子中，設置容器的最大寬度為200px，超出的部分將被隱藏。
三、CSS超出部分顯示省略號
在一些特定的設計場景下，可能不僅要在文本末尾顯示省略號，還需要在其餘省略號之前顯示超出的部分。可以使用偽元素來實現這種效果。
.example3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.example3::before {
content: attr(title);
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
這個例子中，通過設置.container::before的content屬性，它顯示了元素title屬性的值。對於。例中的HTML元素
很長很長的一段文字，似乎超過了 .example3的寬度原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/179933.html
微信掃一掃 
支付寶掃一掃 