CSS3属性之text-overflow:ellipsis
text-overflow: ellipsis 是CSS3的一个属性，它用来说明当文本溢出包含它的元素时，应该如何显示文本的溢出部分。这个属性通常与 white-space: nowrap; 和 overflow: hidden; 一起使用，以确保文本在一行内显示，并且溢出的部分被省略号(…)替换。
解决方案：
- 直接在HTML元素中使用CSS样式：
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
</body>
</html>- 在CSS文件中定义样式：
/* CSS文件 */
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- HTML文件 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
</body>
</html>- 使用内联样式：
<!DOCTYPE html>
<html>
<body>
<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
</body>
</html>以上三种方法都可以实现相同的效果，你可以根据你的项目需求和个人喜好选择使用哪种方法。
评论已关闭