css 文本自动换行和超出隐藏

强制不换行

div{
//white-space：不换行;normal 默认;nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
white-space:nowrap; }

超出部分隐藏

p,li,div{

overflow:hidden;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

white-space:nowrap;

width:100%;

}

white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到<br>标签为止；

overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；

强制英文单词断行

div{
word-break:break-all;
}

这样写的时候可以做到防止表格/层撑破但英文单词却会全部被截断，不利于我们阅读。

table {
table-layout:fixed;

word-break:break-all;

word-wrap:break-word;

}
div{

word-break:break-all;

word-wrap:break-word;

}

做如下改动就可以做到既防止表格/层撑破又防止单词断裂了。

table { 
table-layout: fixed;
word-wrap:break-word;
}
div { 
word-wrap:break-word;
}

 

 

 

 

 

 

转载于:https://my.oschina.net/yuxuanxuan/blog/758550