likes
comments
collection
share

css记录1：文字块内超长只显示一行，且超过宽度显示为省略号

作者站长头像
站长
· 阅读数 292

css格式说明

块内容文字超长后只显示1行， 且超过宽度，显示为省略号(...)

html内容

<body>
    <div>这是一段可能慧衣橱的啊kjkad安定客家话接电话发来的易哈佛的环刀法就好啦对焊法兰很骄傲了东航飞机氯化胆碱哈啊达到的</div>
</body>

style样式

div {
    width: 300px;
    height: 100px;
    border: 1px solid red;

    /** 只显示一行
        超过显示省略号
    */
    text-overflow: ellipsis; /** 超过显示省略号 */
    white-space: nowrap; /** 禁止文字自动换行 */
    overflow: hidden; /** 超过的隐藏(默认"visible") */
}

原始样式图

css记录1：文字块内超长只显示一行，且超过宽度显示为省略号

加了样式后：

css记录1：文字块内超长只显示一行，且超过宽度显示为省略号