用 CSS 实现字符串截断

【要求】：如何用css实现字符串截断，超出约定长度后用缩略符...代替？

  ♪ 答：

<html>
<head>
    <meta charset="UTF-8">
    <title>用 css 实现字符串截断</title>

    <style>
        div {
            width: 300px;
            overflow: hidden;   /*规定当内容溢出元素框时发生的事情*/
            white-space: nowrap;    /*设置如何处理元素内的空白。规定在文本中不进行换行*/
            text-overflow: ellipsis;    /*规定当文本溢出包含元素时发生的事情*/
        }
    </style>
</head>
<body>
    <div>轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！</div>
</body>
</html>

☸ 属性参考：white-space、text-overflow


posted on 2016-09-17 22:12  Ruth92  阅读(1133)  评论(0)  编辑  收藏  举报

导航