[分享]css关于文字超出后隐藏

在网页设计中，经常会遇到文字太长，超出边界的情况，这时候我们就需要用到CSS的一个特性，即文字超出后隐藏。实现文字超出后隐藏有两种方式，一种是使用textoverflow属性，另一种是使用overfl...

在网页设计中，经常会遇到文字太长，超出边界的情况，这时候我们就需要用到CSS的一个特性，即文字超出后隐藏。
实现文字超出后隐藏有两种方式，一种是使用text-overflow属性，另一种是使用overflow属性。
首先，我们来看text-overflow属性的使用方法。在CSS中，我们可以为元素设置text-overflow属性的值为"ellipsis"，表示当文字超出边界后，显示省略号（...）。代码如下：

p {
  white-space: nowrap; /* 首先要禁止文字换行 */
  overflow: hidden; /* 让文字超出的部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
} 

上面的代码中，我们首先为p标签设置了white-space: nowrap属性，意思是不允许文字换行；然后设置了overflow: hidden属性，让文字超出的部分隐藏；最后设置了text-overflow: ellipsis属性，让超出边界的文字显示省略号。
另一种方式是使用overflow属性。我们可以为元素设置overflow: hidden属性，让超出边界的文字隐藏。需要注意的是，这种方式下，超出边界的文字不会显示省略号。

p {
  white-space: nowrap; /* 首先要禁止文字换行 */
  overflow: hidden; /* 让文字超出的部分隐藏 */
} 

上面的代码中，我们只设置了p标签的white-space和overflow属性，让超出边界的文字隐藏。
需要注意的是，当使用这两种方式时，文字的大小和字体会影响文字超出边界后隐藏的效果。一般来说，文字越大、字体越粗，省略号的显示效果会更好。