马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
语法：
text-overflow:clip | ellipsis
默认值为clip 不显示省略标记
clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(...)。
一、常见的单行文本溢出显示省略写法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <style type="text/css">
- .p{
- width: 100px;
- height: 40px;
- line-height: 40px;
- text-overflow: ellipsis; /*1*/
- overflow: hidden; /*2*/
- white-space: nowrap; /*3*/
- word-break: break-all;
- }
- </style>
-
-
- <body>
- <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
- </body>
- </html>
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；
display:-webkit-box;
-webkit-line-clamp: 3/*第几行裁剪*/
-webkit-box-orient:vertical;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <style type="text/css">
- .p {
- height: 60px;
- line-height: 30px;
- width: 80px;
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box; /*1*/
- -webkit-line-clamp: 2; /*2*//*第几行裁剪*/
- -webkit-box-orient: vertical; /*3*/
- }
- </style>
- <body>
- <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <style type="text/css">
- div{
- height: 60px;
- }
- p {
- line-height: 30px;
- width: 80px;
- margin: 0 auto;
- }
- </style>
- <body>
- <div id="div">
- <p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
- </div>
- </body>
- <script type="text/javascript">
- var eleH = document.getElementById("div").clientHeight;
- var pEle = document.getElementById("p");
- while(pEle.clientHeight > eleH) {
- pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
- };
- </script>
- </html>
|
|
