苏飞论坛

标题: css-隐藏文字多余部分并显示省略号 [打印本页]

---

作者: xyc    时间: 2021-8-2 16:55
标题: css-隐藏文字多余部分并显示省略号
     做项目的时候，会经常遇到文字一行显示不了的问题，今天咱就说下，一行中文字多余的显示...的问题。
     核心代码：
     

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

overflow: hidden;

 white-space: nowrap;

 ext-overflow: ellipsis;

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

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

<style>

.txte{

    width:200px;

    border:1px solid #ddd;

}

</style>

<p class="txte">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

     效果：
      (, 下载次数: 8)

上传

点击文件名下载附件
     2.调整过后代码：
     

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

<style>

.txte{

    width:200px;

    border:1px solid #ddd;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

</style>

<p class="txte">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

     效果：
      (, 下载次数: 8)

上传

点击文件名下载附件
     以上就是一行文本多余部分隐藏并显示省略号的全部代码了，希望可以帮助到大家。

---

作者: 范范    时间: 2021-8-2 17:32
实用， 赞

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4