cssellipsis

CSS的ellipsis属性是一种文本裁剪的方式，用于当文本过长时显示省略号来代替被截断的部分。这个属性通常用于处理一些容器中的文本，使得文本能够适应其容器的尺寸。

ellipsis属性有三种方式来实现文本截断和省略号的显示，分别是word-wrap、text-overflow和white-space。

首先，我们先来介绍一下 word-wrap 属性，该属性用于指定是否允许单词内换行，并指定如何进行换行。

当 word-wrap 属性的值为 normal 时，文本在容器边界处断开，并在下一行继续显示。如果容器宽度不足以显示整个单词，那么该单词将会被截断到下一行显示。

当 word-wrap 属性的值为 break-word 时，文本会在单词间隔处自动换行，并且如果容器宽度不足以显示整个单词，则该单词会被强制截断到下一行。

接下来是 text-overflow 属性，该属性用于指定文本溢出时的处理方式。当文本溢出容器时，可以通过 text-overflow 属性来显示省略号。

当 text-overflow 属性的值为 clip 时，溢出文本将被隐藏，而不显示省略号。

当 text-overflow 属性的值为 ellipsis 时，溢出文本将会显示省略号，从而表示有文本内容被省略。

当 text-overflow 属性的值为 string 时，我们可以通过给该属性额外指定一个字符串来替换省略号，可以自定义显示的文本内容。

*是 white-space 属性，该属性用于指定空白符处理方式。当我们希望让文本在容器中自动换行时，可以通过 white-space 属性来控制。

当 white-space 属性的值为 normal 时，文本在容器边界处断开，并在下一行继续显示。

当 white-space 属性的值为 nowrap 时，文本将在同一行内显示，不会进行换行操作。

当 white-space 属性的值为 pre 时，文本将按照原始的空白符位置进行显示，可保持文本内容的格式。

但需要注意的是，在使用 white-space 属性时，如果容器宽度不足以显示整个文本内容，仍然会进行截断操作。

综上所述，我们可以通过组合使用 word-wrap、text-overflow 和 white-space 这三个属性来实现文本的截断和省略号的显示。比如，我们可以使用 white-space:nowrap;word-wrap:break-word;text-overflow:ellipsis; 这一组合来实现在容器边界处截断文本，并在溢出部分显示省略号。

总结一下，CSS的ellipsis属性通过指定 word-wrap、text-overflow 和 white-space 这三个属性的值来实现文本的截断和省略号的显示。这种方式适用于需要在容器中显示文本内容，但由于容器尺寸限制无法完整显示文本时的情况。通过合理地运用这些属性，我们可以实现灵活的文本截断和省略号的显示效果。