欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css实现超出部分显示省略号,css实现字母自动折行

程序员文章站 2022-06-08 09:15:46
...

css实现超出部分显示省略号
显示一行,省略号

 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 word-break: break-all;
 /* 不换行,超出部分隐藏且以省略号形式出现*/

显示两行,省略号

 
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

css实现字母自动折行

加上如下的CSS设置,设定好宽度width,然后设置合适的word-wrap和word-break属性:

.breakAll{
  white-space:normal;
  word-break:keep-all;
  word-wrap: break-word;
}

word-break 语法
属性设置如何处理单词折断,仅支持IE

word-break : normal | break-all | keep-all

参数:

  • normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
  • break-all :该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。只对英文起作用,以字母作为换行依据
  • keep-all :与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。完整英文单词换行

white-space语法
属性设置如何处理元素内的空白,文本进行换行

white-space: normal | nowarp | pre | pre-line | pre-warp | inherit

参数:

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。强制不换行,都起作用。
  • pre-wrap 保留空白符序列,但是正常地进行换行。只对中文起作用,强制换行
  • pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap 属性
word-wrap属性允许长的内容可以自动换行。

word-wrap: normal|break-word;

参数:

  • normal 只在允许的断字点换行(浏览器保持默认处理)。
  • break-word 在长单词或 URL 地址内部进行换行。只对英文起作用,以单词作为换行依据
相关标签: css