超出部分隐藏以省略号表示

一、超出一行
html

<div style="width:20%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;">这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。
</div>

效果

二、超出二行
html

<div style="width: 20%"><span style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。这是一段很长的文字，当容器放不下则会出现省略号。</span>
</div>

效果

超出部分隐藏以省略号表示相关推荐

CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
多余文字隐藏用省略号代替
一,多行文字隐藏用省略号代替 border:1px solid #ddd; width: 200px; word-break: break-all; text-overflow: ellipsis; ...
对于文字设置超出部分隐藏
1. 设置单行文字超出部分隐藏 P{overflow: hidden; /* 超出一行文字自动隐藏 */text-overflow: ellipsis; /*文字隐藏后添加省略号*/white-spa ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
css设置文本超出两行末尾用省略号表示
1]html5代码 <body> <div class="hhh">单行末尾为省略号ssssssssssssssssssssssssssssssssssss ...
echart饼图label超出绘图区域显示省略号
最近在工作遇到这样一个问题,在绘制饼图时,由于label文字过长,而超出了canvas的绘图区域,导致超出的label直接被截掉.dalao要我帮忙看一下这个问题- 阐述问题: 就像正常的思路一样,用 ...
html设置超出自动隐藏,css如何设置超出部分隐藏
CSS 一段文本怎么设置超过省略号显示单行文本实现方法: 实现效果: 多行文本溢出显示省略号实现方法: 实现效果: 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及 ...

超出部分隐藏以省略号表示

超出部分隐藏以省略号表示

超出部分隐藏以省略号表示相关推荐

最新文章

热门文章