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

118次阅读

共计 316 个字符,预计需要花费 1 分钟才能阅读完成。

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") */
}

原始款式图

加了款式后:

正文完
 0