Yapei Li

专注于前端领域

0%

文字溢出部分显示为省略号

发表于 分类于
本文字数： 2.8k 阅读时长 ≈ 3 分钟 
1
2
3
4
5
6
7
8
9
10
11
white-space:nowrap;         //强制不换行（中英文都起作用）

white-space:pre-wrap;       //只对中文起作用，强制换行

word-break:break-all;       // 只对英文起作用，以字母作为依据，强制换行

word-break:break-word;      //只对英文起作用，以单词作为依据，强制换行

overflow:hidden;            //超出的内容隐藏

text-overflow:ellipsis;     //超出的内容为省略号

单行文本

1
2
3
4
5
6
7
.text {
  width: 100px;
  white-space: nowrap;       /* 使文本不可换行 */
  word-break: break-all;     /* 英文换行，以字母作为依据 */
  overflow: hidden;          /* 隐藏溢出部分 */ 
  text-overflow: ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
}

多行文本

方法1

1
2
3
4
5
6
7
8
9
.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;       /* 超出的内容显示省略号 */
    word-break: break-all;         /* 英文换行，以字母作为依据 */
    display: -webkit-box;          /* 将对象作为弹性伸缩盒子模型显示 */   
    -webkit-box-orient: vertical;  /*设置子元素排列方式*/
    -webkit-line-clamp: 3;         /*设置显示的行数，多出的部分会显示为...*/
}

缺点： 只适用于WebKit内核的浏览器。所以大部分移动端浏览器都支持，google，Safari 浏览器只要不是版本过低都支持。ie，火狐浏览器不支持这个方法。

方法2

使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
p {
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  width: 300px;
  /*设置文本为两端对齐*/
  text-align: justify;
  overflow: hidden;
}

p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  /*将省略号的大小设置为1个字体大小*/
  width: 1em;
  /*设置背景，将最后一个字覆盖掉*/
  background: #fff;
}

white-space

用来设置如何处理元素中的 空白

字符是否换行显示

语法

1
2
3
4
5
6
7
8
9
/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces;

值

值 含义 兼容性
normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要
nowrap 连续的空白符会被合并。但不允许换行
pre 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行
pre-wrap 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。只对中文起作用，强制换行
pre-line 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子(line boxes)」时会换行
break-spaces 与 pre-wrap的行为相同，除了下边的注释

任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

white-space 值的行为

值 换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 不换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

word-break

指定了怎样在单词内断行

语法

1
2
3
4
5
6
7
8
9
10
/* 关键字值 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* 已弃用 */

/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: unset;

值

CJK 指中文/日文/韩文

值 含义 兼容性
normal 使用默认的换行规则（中文换行，连续英文不换行） field3
break-all 允许任意非CJK文本间的单词断行（只对英文起作用，以字母作为依据，强制换行） 所有浏览器都支持
keep-all 不允许CJK文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。 iOS下的Safari8/9都还不支持,现在移动端还不适合使用
break-word 他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少（只对英文起作用，以单词作为依据，强制换行） IE不支持

overflow-wrap & word-wrap

overflow-wrap 与 word-wrap 关系

word-wrap 属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

作用

用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

语法

1
2
3
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
值 含义
normal 行只能在正常的单词断点处中断。（例如两个单词之间的空格）
break-word 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行