CSS文字超出显示省略号

最新推荐文章于 2021-04-09 11:12:32 发布
最新推荐文章于 2021-04-09 11:12:32 发布
阅读量348 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_19327991/article/details/72928636
版权 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

但是因为两个行内元素例如span一起的时候会出现一些间距，为了去掉这些间距我们可以给元素添加font-size:0;但这样做的话，会发现省略号消失了，但不添加font-size:0;又会出现间距

<span>1</span>
<span>2</span>

那么我们可以将第一个尾部与第二个头部之间的空白字符删除，这时候文字间的间距就会消失，font-size:0;也可以取消不写，这时候省略号也会出现

<span>1</span><span>2</span>
豆i浆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文字超出部分用省略号显示
qq_30668579的博客
04-18 7223
单行文本的情况： css: .single-line{ width: 200px; height: 40px; border: solid 1px #000000; overflow: hidden; /*文本不换行*/ white-
使用flex布局 超出部分显示省略号
Sophiaxnm的博客
04-30 6866
如图，需要实现的是类似于上图的一个固底的标签选择栏，这个栏目有右边的确定按钮，显示选择的标签的文字和可以清除文字的关闭按钮，注意，关闭按钮在内容为空时不显示，当有标签文字时，跟随在标签后面，当关闭按钮向右移动至确定按钮时，不能再移动，同时文字多出的部分显示省略号。 样式比较复杂，主要的核心在于中间的文字省略，主要的核心代码是： display: flex; fl...
html限制文字行数，并且超出部分显示为省略号
Android之路
08-21 5054
p{ width:200px;//必须指定宽度 text-overflow: ellipsis;//超出文字显示为省略号 overflow: hidden;//隐藏超出部分 -webkit-line-clamp: 2;//限制行数 }
文字超出隐藏，显示省略号...
坤音女孩的博客
11-01 3601
1.文字超出给定的宽度，让内容隐藏起来，并出现省略号…（要确定具体的宽度） table tr .td_pic{ height: 50px; width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin: 0px auto; ...
CSS 省略号（单行省略号、多行省略号）
热门推荐
Ares5k
04-09 7万+
单行超出省略号代替、多行超出省略号代替
css把超出的部分显示为省略号的方法兼容火狐
09-06
在CSS中，将超出文本部分显示为省略号是一种常见的文本截断技术，它可以帮助保持布局的整洁，尤其是在有限的空间内展示长文本时。要实现这个功能并确保在Firefox浏览器中兼容，我们可以采用以下方法： 首先，我们...
微信小程序实现多行文字超出部分省略号显示功能
10-16
通过这种方式，我们可以有效地在微信小程序中实现多行文字的省略号显示功能。需要注意的是，由于`-webkit-line-clamp`和`-webkit-box`是Webkit内核特有的CSS属性，所以这种方法只适用于基于WebKit的浏览器或平台，如...
纯css控制超出部分省略号显示
01-04
纯css 控制超出宽度部分用省略号显示，纯数字跟连续的英文字母请绕行。
CSS文本超出2行就隐藏并且显示省略号
01-19
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...
css 超出用省略号当标题字符溢出用省略号表示
09-25
列表由于标题过长而影响美观度，所以想让标题溢出的文字以省略号方式表现.此类文章网上会有很多，本文整理了一些经验技巧与大家共同分享，感兴趣的你可不要错过了哈，希望可以帮助到你
css限制显示的文字多少,对超出部分,以...省略
liukai6的博客
06-29 3552
.text_overflow{ width:6.5rem; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; }
css3实现多行文字超出部分省略号代替
03-09 3987
display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden;
CSS----高级技巧(三角,用户界面样式,图片表单语文本对齐,文本省略号,)
VanChaoi的博客
11-11 294
CSS三角 div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; } 1.我们用css边框可以模拟三角效果 2.宽度高度为0 3.我们4个边框都要写,只保留需要的边框颜色,其余的不能省略,都改为transparent透明就好 4.为了照顾兼容性低版本的浏览器,加上
css小技巧，使用font-size：0清除两个子元素间间距
weixin_42156401的博客
07-04 306
<div class="contentRightBox" > <div class="notice"> 公告告示 </div> <a href="" &...
css3属性text-overflow：ellipsis的用法与注意之处
weixin_38098192的博客
03-13 2633
1.单行文本 text-overflow：clip | ellipsis 默认值：clip 适用于：所有元素 clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 ellipsis：当对象内文本溢出时显示省略标记（...）。 当值为ellipsis，有时不会出现（...），这是因为使用ellipsis的时候必须配合overflow：hidden；white-s...
div文字超出显示省略号
不明所以
02-28 1万+
单行限制 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行限制 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
微信小程序 --- 日历效果
删库跑路
02-27 1万+
效果预览: wxml部分: &lt;view class='box1' style='width: {{ sysW * 7 }}px'&gt; &lt;view class='dateBox'&gt;{{ year }} - {{ month}}&lt;/view&gt; &lt;block wx:for='{{ weekArr }}'&gt; &lt;view style...
像input,button等元素对齐方法
删库跑路
06-08 8876
使用vertical-align可以实现对齐<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input,button{ height: 30px;
css给图片增加模糊效果
删库跑路
06-08 2693
只要在图片里面添加一个CSS即可：filter: blur(10px);px代表模糊度
css文字超出显示省略号
最新发布
09-26
### 回答1： 你可以使用 CSS 属性 `text-overflow: ellipsis` 来实现超出显示省略号的效果。...综上所述，通过设置元素的宽度、文本溢出控制属性和省略号显示方式等样式，就可以实现CSS文字超出显示省略号的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值