css div多余文字用省略号代替

2017-01-14 08:48:45来源:CSDN作者:xyr05288人点击

一. 相关知识

(1)规定段落中的文本不进行换行

p  {  white-space: nowrap  }

可能的取值以及描述

normal      默认。空白会被浏览器忽略。pre         空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap      文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。pre-wrap    保留空白符序列,但是正常地进行换行。pre-line    合并空白符序列,但是保留换行符。inherit     规定应该从父元素继承 white-space 属性的值。

(2)多余文字用省略号代替

div.test{text-overflow:ellipsis;}

可能的取值以及描述:

clip        修剪文本。   ellipsis    显示省略符号来代表被修剪的文本。string      使用给定的字符串来代表被修剪的文本。  

二.示例代码

<!DOCTYPE html><html>    <head>        <meta charset="GBK"></meta>        <style type="text/css">             /*             /*当行文字*/             #testDIV{                    width:100px;                    height:50px;                    overflow: hidden;                    text-overflow: ellipsis;                    white-space: nowrap;                    border:1px solid #ddd;             }*/             /*多行文字*/             #testDIV{                    border:1px solid #ddd;                    width: 200px;                    word-break: break-all;                    text-overflow: ellipsis;                    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/                    -webkit-line-clamp: 3; /** 显示的行数 **/                    overflow: hidden;  /** 隐藏超出的内容 **/             }        </style>    </head>    <body>         <div id="testDIV" >            点击啦啦啦啦啦了绿绿绿啦啦啦啦啦了绿绿的哈哈哈哈哈jk道具哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈         </div>    </body></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台