关于css:css记录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") */
}

原始款式图

加了款式后:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理