Safari浏览器文字和省略号重叠的尴尬局面，前端如何解决？

前端

2023-01-02 22:51:10

Safari 文字和省略号的尴尬重叠

问题剖析

Safari，这款苹果公司打造的网页浏览器，向来以简洁、高效、美观著称。然而，在浏览某些网页时，我们经常会遇到文字和省略号重叠的尴尬局面。当文本超过三行时，省略号悄然而至，与紧挨的文字亲密无间，不仅影响美观，还大大降低了阅读体验。

罪魁祸首

导致文字与省略号重叠的主要原因有两个：

CSS 属性 text-overflow 的滥用： text-overflow 属性决定着文本超过其父元素边界时的显示方式。当设置为 ellipsis 时，文本会进行裁剪，尾部显示省略号。然而，在某些情况下，省略号会与相邻文字重叠，让阅读变得困难。
省略号元素与文本元素的布局问题： 当省略号元素与文本元素同处一行时，如果省略号元素的宽度过大，就有可能与相邻文本重叠。

解决之道

要解决文字与省略号重叠的问题，有多种方法可供选择：

使用 text-overflow: clip 裁剪文本： text-overflow: clip 属性直接裁剪文本，不显示省略号。这种方法简单有效，但可能导致文本难以阅读。
使用 overflow-wrap: break-word 换行文本： overflow-wrap: break-word 属性允许文本在单词间换行，防止文本溢出父元素边界。这种方法更加灵活，能确保文本始终保持可读性。
使用 word-break: break-all 强制换行： word-break: break-all 属性强制文本在每个字符间换行，同样能防止文本溢出。但这种方法较为极端，可能会导致文本难以阅读。
调整行高和间距优化布局： 当省略号元素与文本元素同处一行时，通过调整行高和间距，可以防止两者重叠。例如，增加行高或减小文本元素与省略号元素之间的间距。

代码示例

/* 使用 text-overflow: clip 裁剪文本 */
p {
  text-overflow: clip;
}

/* 使用 overflow-wrap: break-word 换行文本 */
p {
  overflow-wrap: break-word;
}

/* 使用 word-break: break-all 强制换行 */
p {
  word-break: break-all;
}

/* 调整行高和间距优化布局 */
p {
  line-height: 1.5em;
  margin-right: 10px;
}