css标签折行显示溢出隐藏,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;表示文本不会换行，在同一行继续，知道遇到
标签为止；

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;

}