css-隐藏文字多余部分并显示省略号

xyc

     做项目的时候，会经常遇到文字一行显示不了的问题，今天咱就说下，一行中文字多余的显示...的问题。
     核心代码：
     

[CSS] 纯文本查看 复制代码

overflow: hidden;
 white-space: nowrap;
 ext-overflow: ellipsis;

    下面就分析下正常情况下和使用过后的不同。
     1.正常代码：
   

[XML] 纯文本查看 复制代码

<style>
.txte{
    width:200px;
    border:1px solid #ddd;
}
</style>
<p class="txte">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

     效果：
     
     2.调整过后代码：
     

[XML] 纯文本查看 复制代码

<style>
.txte{
    width:200px;
    border:1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
<p class="txte">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

     效果：
     
     以上就是一行文本多余部分隐藏并显示省略号的全部代码了，希望可以帮助到大家。

范范

实用， 赞