[分享]css两行文字省略

CSS中的两行文字省略是指当一段文字超过指定的宽度时，只在末尾显示省略号，而不是全部显示出来。这个效果可以通过以下的CSS样式来实现： p { width: 200px; whitespace: no...

CSS中的两行文字省略是指当一段文字超过指定的宽度时，只在末尾显示省略号，而不是全部显示出来。这个效果可以通过以下的CSS样式来实现：

 p {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } 

其中，width属性指定了文本框的宽度，white-space属性设置为nowrap表示不换行，overflow属性设置为hidden表示超出文本框部分隐藏起来，text-overflow属性设置为ellipsis表示在末尾显示省略号。

这个技巧广泛应用于设计响应式网页和移动设备上的文本处理。在移动设备上，屏幕空间有限，如果你想要让文字在一行内完整显示，则需要缩小文字大小或者提高文本框的高度，而这可能会影响整个页面的排版。使用两行文字省略可以在保持良好排版的同时，确保文本框不会超出限制。