多行文本溢出显示省略号

179 阅读1分钟
{
            /* 这里元素的宽高克自行设置 */
            
            /* 要想文本过多时,不想让文字超出盒子,必须要设置盒子的宽度 */
            width: 500;
            /* 除了上面一定要设置宽度外,还需要满足下面的条件 */
            /* 文本显示省略号 */
            text-overflow: ellipsis;
            /* 溢出的内容将它隐藏 */
            overflow : hidden;
            /* 主要控制父元素容器里面子元素的排列方式 */
            display: -webkit-box;
            /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置两行就让文本出现省略号 */
            -webkit-line-clamp: 2;
            /* 属性规定框的子元素应该被水平或垂直排列 */
            -webkit-box-orient: vertical;
 }