div+CSS设置一行内文字超过宽度不换行且不显示
博客专区 > emberma 的博客 > 博客详情
div+CSS设置一行内文字超过宽度不换行且不显示
emberma 发表于3年前
div+CSS设置一行内文字超过宽度不换行且不显示
  • 发表于 3年前
  • 阅读 132
  • 收藏 14
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: div+CSS设置一行内文字超过宽度不换行且不显示

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。

一般的文字截断(适用于内联与块):
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话,定义有一点不一样:
==============CSS================ 
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

=================================

div中文字超过自动换行的css样式

word-break:break-all;   
       overflow:hidden; 

---------------------------------

word-wrap:break-word;


标签: css
共有 人打赏支持
粉丝 2
博文 35
码字总数 13776
×
emberma
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: