单行／多行文本溢出的省略样式

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

1. 单行文本溢出

text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
white-space：设置文字在一行显示，不能换行
overflow：文字长度超出限定宽度，则隐藏超出的内容

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

2. 多行文本溢出

-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden：文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

   .ellipsis-2 {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }

单行／多行文本溢出的省略样式相关推荐

css如何实现单行／多行文本溢出的省略样式？
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出,我们可以分成两种形式: 单行文 ...
转：【CSS/JS学习】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势...
本文来源:http://www.cnblogs.com/penghuwan/p/6682303.html 引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐 ...
react如何省略号_react 单行多行文本溢出显示省略号...
#### 文本溢出处理 #### ##### 单行文本溢出 ##### 单行文本溢出,可直接用css处理,很简单 .ellipsis { overflow: hidden; text-overflow ...
单行溢出隐藏没生效_小Tip：关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给"去掉",就像这样: 哈哈哈哈哈哈哈哈哈哈哈 .hid{ width: 100px; height: 20px; overf ...
CSS单行/多行文本溢出显示省略号(...)
1.单行文本CSS设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2.多行文本CSS设置: { over ...
[前端] 实现单行文本溢出和多行文本溢出省略
项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助... 一.单行文本溢出省略 CSS样式: <style>.box {width: 120px;he ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
单行文本溢出和多行文本溢出省略...
平时在开发过程中,很常见的需求就是文字溢出显示... 此类需求有以下集中方法来解决 1. 单行溢出显示... overflow:hidden; width: 200PX; white-space:n ...
CSS单行／多行文本溢出隐藏
前言在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出,我们可以分成两种形式: ...
CSS基础10-单行/多行文本溢出省略
文本溢出省略单行文本溢出省略文本只在一行内显示 <html lang="en"> <head><meta charset="UTF-8& ...

单行／多行文本溢出的省略样式

1. 单行文本溢出

2. 多行文本溢出

单行／多行文本溢出的省略样式相关推荐

最新文章

热门文章