text-overflow属性用于控制当文本溢出容器边界时如何显示。默认情况下，文本会被截断，即隐藏在容器的边界之外。但对于某些情况下，如对于长标题、标语等，大家可能希望在文本过长时显示省略号，以避免影响页面的美观度。
/* 省略号显示在文本开头 */
.text-ellipsis-start {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl; /* 重要！必须设置文本的方向为从右向左 */
}如上所示的代码可以使得省略号显示在文本开头处。当文本长度超过容器的宽度时，文本末尾的内容会被省略，只显示省略号和文本开头的内容。
/* 省略号显示在文本末尾 */
.text-ellipsis-end {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}如果你希望省略号显示在文本的末尾处，可以使用如上代码。这个样式会将文本中超过容器宽度的内容隐藏，并在文本末尾添加省略号。
需要注意的是，在设置省略号时，必须先将white-space属性设置为nowrap，使文本不会自动换行，才能实现省略号效果。
在设计中，当大家碰到文本过长无法完全显示时，可以尝试使用text-overflow属性以及上述的样式，让页面显示更加美观和舒适。