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

最新推荐文章于 2024-03-25 09:30:50 发布

十一路客

最新推荐文章于 2024-03-25 09:30:50 发布

阅读量1.5w

点赞数 4

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xyr05288/article/details/54411117

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一. 相关知识

(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>

十一路客

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css div多余文字用省略号代替

一. 相关知识(1)规定段落中的文本不进行换行p { white-space: nowrap }可能的取值以及描述normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap 保留空白符
复制链接

扫一扫