失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css标签折行显示溢出隐藏 css 文本自动换行和超出隐藏

css标签折行显示溢出隐藏 css 文本自动换行和超出隐藏

时间:2021-03-03 13:47:50

相关推荐

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;

}

如果觉得《css标签折行显示溢出隐藏 css 文本自动换行和超出隐藏》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。