CSS——文字溢出省略成点点点

一、单行文字

<div class="text">我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字我是单行文字
</div>

 .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

二、多行文字

<div class="text">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字
</div>

.text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;  /*行数*/-webkit-box-orient: vertical;
}

注意：多行文字中不能在 p标签和div里，如下示例中不会出现点点点：

<div class="text"><p>我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字</p><div>我是多行文字我是多行文字我是多行文字</div><div>我是多行文字我是多行文字我是多行文字</div><div>我是多行文字我是多行文字我是多行文字</div>
</div>

CSS——文字溢出省略成点点点相关推荐

CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略只需添加三行代码即可: overflow: hidden; /* 超出的文本隐藏 */ text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本. ...
css文字溢出部分在另一个div显示（代码篇）
css文字溢出部分在另一个div显示博主博客: 前端代码:html.css(图文混排)文字环绕 - 案例篇以上就是关于 " css文字溢出部分在另一个div显示(代码篇) " ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
css文字溢出隐藏为三个点
css文字溢出隐藏为三个点- (1)单行 white-space: nowrap;//不换行 text-overflow: ellipsis;//将文本溢出显示为(-) overflow: hidde ...
文字溢出省略和用户体验优化
这是我又一次探究文字溢出相关问题,也是我在用户体验道路上踏出的又一小步. 之前提到"文字溢出"瞬间就能想到 ellipsis.再接触的多了一点会同时想到 display: -web ...
CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
css文字与省略号重叠,CSS 文字溢出处添加省略号(示例代码)
兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的 ...
css文字溢出省略号显示
单行文字溢出省略号显示步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
css 文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代让文字只显示一行,超出显示省略号 overflow: hidden; // 溢出部分隐藏 whi ...
css 文字溢出...显示,hover时显示隐藏文字
1.文字溢出隐藏并...显示 .tem_content_row{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2 ...

CSS——文字溢出省略成点点点

一、单行文字

二、多行文字

CSS——文字溢出省略成点点点相关推荐

最新文章

热门文章