CSS控制文本内容换行

原创 郭兴旺 随笔 学习笔记 456阅读 2016-11-18 20:36:50 举报

今天在工作中遇到的问题:

问题:文本在固定容器中不换行,超出容器显示;如下图

html 代码

解决方法:
1、word-wrap:break-word;配合overflow:hidden。效果如下

html 代码

延伸阅读:word-wrap:normal | break-word (内容换行)
normal:默认的属性值。(允许内容顶开指定的容器边界)
break-word:内容 将在边界内换行(不截断英文单词换行)
2、word-break:break-all;配合overflow:hidden。
延伸阅读:word-break:normal | break-all | keep-all(词内换行)
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行。注意:如果出现某个英文字符串长度超过边界,则后面的部分内容将撑开边框,如果边框为固定属性,则后面部分将无法显示。
break-all:强行换行,将截断英文单词。
keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行。注意:如果出现某个英文,字符串长度超过边界,则后面的部分将撑开边框。如果边框为固定属性,则后面的部分将无法显示。

评论 ( 3 )
最新评论
暂无评论

赶紧努力消灭 0 回复