css+html强制换行及禁止换行问题 |
您所在的位置：网站首页 › css文字不允许换行 › css+html强制换行及禁止换行问题 |
|
一 解决html页面纯英文和数字不自动换行，但中文就可以自动换行的问题
添加css属性 word-break:break-all; word-wrap:break-word; 二.HTML标签超过部分展示为省略号 超出固定长度（块元素block,如果是行内块元素用inline-block） span { display: block; width:100px;/*指定宽度*/ overflow: hidden;/*超出部分隐藏*/ text-overflow: ellipsis;/*文字超出部分以省略号显示*/ white-space: nowrap;/*内容超宽后禁止换行显示*/ } 超出一行 span { white-space: nowrap;/*内容超宽后禁止换行显示*/ overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*文字超出部分以省略号显示*/ } 超出三行 .p1{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 三.以下是具体说明： 1.white-spacewhite-space 属性是用来设置如何处理元素中的空白 normal 默认。连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 文本不换行在同一行上继续，直到遇到 br 标签为止，连续的空白符会被合并。 pre 连续的空白符会被保留。在遇到换行符或者元素时才会换行。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 2. word-wrap 属性word-wrap 属性用来标明是否允许浏览器在单词内进行断句 normal: 只在允许的断字点换行(浏览器保持默认处理) break-word:在长单词或URL地址内部进行换行， 内容将在边界内换行。如果 需要，单词内部允许断行。 3. word-break 属性word-break 属性用来标明怎么样进行单词内的断句 normal：使用浏览器默认的换行规则。 break-all:允许在单词内换行，允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。 keep-all:只能在半角空格或连字符处换行，不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |