css文字超出隐藏的省略号发生错位的解决办法

最新推荐文章于 2023-06-01 11:45:50 发布
最新推荐文章于 2023-06-01 11:45:50 发布
阅读量651 收藏 1
点赞数
分类专栏： CSS3 兼容性问题 文章标签： css 兼容性 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljw_Josie/article/details/116449174
版权
现象：文本超出隐藏，省略号发生了遮挡和错位

image.png

解决办法:
删除text-align: justify;

当初是为了文本两端对齐视觉上好看些才加的，没想到这行css会在文本超出隐藏的时候出现这样的错位。

去除样式后恢复正常

image.png

ljw_Josie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css文本省略（······）行高错位（bug）- 解决办法
草巾冒小子的博客
04-02 1297
应用css文本省略（······）属性：-webkit-line-clamp: 3; 导致：行高错位。（F12查看发现css属性line-height的值并没变，但为什么浏览器显示文本的实际行距却变小？） 样式bug · 截图说明： 上面的文字仅仅只是设置了line-height属性； 因为： 没有设置height行高属性， 所以： 在缩放的时候，导致了这种bug问题现象。 这里示例以下...
css行级元素设置超出部分隐藏使用省略号代替，出现基线不对齐的解决方法
林一天的博客
04-10 1468
一、现象描述： 三个行元素同一行展示、其中两个行元素需要设置超出部分隐藏使用省略号替代的效果 二、实现方法 具体css实现代码如下： width: 70px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; display: inline-block; 三、引发问题 css的超出部分隐藏代码，会导致同一行元...
css-文字对齐问题 text-align: justify
YogaMiller的博客
08-19 533
text-align 默认 left 用的最多的是center, right比较少 给大段的文字直接设置是没问题的. --如果你的文字只有一行, 是不生效的. 所以要利用下伪类(给伪类设置宽度100%). <style> p { width: 500px; text-align: justify; } .box { width: 500px; ..
富文本/整段文本中右侧无法对齐的问题之text-align: justify(css)
Syleapn的博客
11-01 2613
今天的重点是：text-align: justify（实现两端对齐） 对于整个段落，用的最多的要数富文本（作用于商品详情页），但用正常的形式排下去，右边的效果就像小狗啃了一般，参差不齐。所以应该如何修饰呢？ 要使文本两端沿着它的外边线对齐，可用text-align: justify；再配合letter-spacing设定一个恰当的间距来达到理由的效果，使得排版更美观。letter-spacin...
css文本超出宽度使用省略号导致垂直方向对不齐的解决
wxz980927155的博客
06-01 600
超出文本宽度使用省略号会导致文本垂直向上排列 vertical-align: bottom; 使用vertical-align属性把dom的文本排列垂直向下
CSS文本超出2行就隐藏并且显示省略号
01-19
css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; /...
css把超出的部分显示为省略号的方法兼容火狐
09-06
兼容火狐css控制超出部分用省略号代替
css 超出用省略号当标题字符溢出用省略号表示
09-25
列表由于标题过长而影响美观度，所以想让标题溢出的文字以省略号方式表现.此类文章网上会有很多，本文整理了一些经验技巧与大家共同分享，感兴趣的你可不要错过了哈，希望可以帮助到你
CSS实现标题文字过长部分显示省略号的方法
09-24
主要介绍了CSS实现标题文字过长部分显示省略号的方法,并且讲解了针对单行文字溢出和多行文字溢出的情况,需要的朋友可以参考下
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法
09-24
下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
超出部分显示省略号与文字重叠
weixin_66892551的博客
06-01 118
原因:可能是有text-align:justify的属性。
【css】文字溢出，显示省略符号（...）/ 点点点
sayyy的专栏
08-02 4122
略
多行文本溢出显示省略号
热门推荐
qq_43687594的博客
03-15 1万+
文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种： 使用定位伪元素遮盖末尾文字 步骤： 给父元素设置: overflow: hidden;/* 溢出隐藏 */ line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
【css】css超出两行省略号
Meditation_Crazy
08-20 451
css超出两行省略号 如果div没设置高度 https://www.cnblogs.com/xiaosuibu/p/8196067.html text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; 如果div设置了高度 如果d
css安卓手机位置偏差,完美解决移动端使用rem单位时CSSSprites错位问题_html/css_WEB-ITnose...
weixin_39824020的博客
08-04 874
移动端网页开发离不开强大的 rem 支持，但由于各尺寸基数未必成比例，以及浏览器的计算偏差，常常会导致 background-position 不够精确，引发 CSS Sprites 错位。下图左侧为 PC 端模拟页面，右侧为移动端实测：明显可以看出右侧的图标已经错位，图中的问题可以依赖 iconfont 解决，但只局限于单色图标。既要响应式，又得避免 rem 带来的问题，选用百分比是个好方案。可...
css超出两行省略号没效果,Css 设置超过再两行显示省略号
weixin_35299004的博客
08-04 3017
大部分场景都是超过一行就显示...{{item.name}}{{item.name}}export default {return {item: {name:'this is a very long name，this is a very long name，this is a very long name'}}}.other-product-item {text-overflow: -o-ell...
css display:“inline-block“错位问题与css超出部分显示省略号
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-22 1535
222
关于text-align中的justify
weixin_43801564的博客
12-03 1万+
在很多的业务场景中，我们可能需要达到这样的一个效果 也就是将左边的label设定成相同的宽度，并且label内部的文字需要两端对齐，这里需要使用到text-align中的justify。 语法 使用起来很简单，只要在需要文本两端对齐的标签上加上text-align:justify 左边是设定text-align:left，右边是设定了text-align:justify,可以看出，justif...
纯css实现气泡对话框尖角处理
ljw_Josie的博客
05-06 7938
先来看一下效果图： 简单粗暴上代码： html： less: .dialog-box { position: relative; span {
css 文字超出隐藏省略号
最新发布
01-06
以下是两种CSS实现文字超出隐藏省略号的方法： 1. 单行显示省略号： ```css /* 强制文本一行内显示，超出部分隐藏，用省略号代替 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值