本文通过一个简单的示例展示了如何使用CSS实现当内容超出指定宽度时自动以省略号(...)代替的效果。具体包括设置元素的宽度、高度、边框、内边距等属性，并运用text-overflow、white-space等属性来确保文本正确显示。
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="test">
我是测试的文字哈，超过了的部分将自动用...替换
</div>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="test">
我是测试的文字哈，超过了的部分将自动用...替换
</div>
扫一扫
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
