文字超出隐藏并显示省略号

转载于 2015-08-19 15:49:58 发布 · 776 阅读

文章标签：

#css

WEB 专栏收录该内容

16 篇文章

订阅专栏

本文介绍两种不同的CSS样式实现方法，一种是通过设置特定的颜色和边框来突出显示文本，另一种则是利用overflow属性配合text-overflow和white-space属性实现文本溢出时的省略效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<pre name="code" class="html"><br />
<style type="text/css">
.css1{
    color:#6699ff;border:1px #ff8000 dashed;
    margin-bottom:20px;
    width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    width: 20em;/*不允许出现半汉字截断*/
    color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class="css1">测试文字</div>
<div class="css2">测试文字</div>
<p>