[分享]css内容超出省略号

CSS中有时候我们会遇到文本内容过长溢出边界的情况，我们可以使用textoverflow属性来实现在边界处省略多余的文本内容。当然，在使用textoverflow属性的同时，还要给文本加上滚动条的样式...

CSS中有时候我们会遇到文本内容过长溢出边界的情况，我们可以使用text-overflow属性来实现在边界处省略多余的文本内容。当然，在使用text-overflow属性的同时，还要给文本加上滚动条的样式。

 /* 定义文本样式 */
    .text {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 溢出隐藏 */
        text-overflow: ellipsis; /* 使用省略号 */
    }
    
    /* 定义滚动条样式 */
    .text::-webkit-scrollbar {
        width: 5px;
    }
    
    .text::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }
    
    .text::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    } 

上面的代码就是一个典型的text-overflow省略号的实现方式。其中，white-space: nowrap属性使得文本内容不自动换行，overflow: hidden属性控制文本内容超出父元素时隐藏，text-overflow: ellipsis属性指定使用省略号代替文本内容。而滚动条的样式定义则使用了CSS3的伪元素。

除此之外，text-overflow属性还有其它两个可选值：clip和string。其中，clip表示直接裁剪文本内容，而string则允许我们指定一个自定义的字符进行替换。使用text-overflow属性，我们可以在CSS中轻松地控制文本内容的显示方式，让页面更加规范美观。