强制不换行
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;
}
如果觉得《css标签折行显示溢出隐藏 css 文本自动换行和超出隐藏》对你有帮助,请点赞、收藏,并留下你的观点哦!