如何解决两个inline-block并排出现空白间隙的情况&&如何进行文字溢出设置

最新推荐文章于 2022-02-25 17:06:51 发布

原创最新推荐文章于 2022-02-25 17:06:51 发布 · 907 阅读

1 ·

CC 4.0 BY-SA版权

css 同时被 3 个专栏收录

11 篇文章

订阅专栏

web前端

11 篇文章

订阅专栏

Vue实战项目2——饿了么APP

8 篇文章

订阅专栏

本文介绍如何使用CSS的overflow、white-space和text-overflow属性处理文本溢出，实现省略号显示效果，以及解决inline-block元素间的空白间隙问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.如何进行文字溢出设置

在这里插入图片描述
有时候·我们想实现如上效果，在如果文字内容超出元素框宽度，就以省略号的形式出现，而且只出现一行文字。这是我们需要给父元素设置overflow，white-space以及text-overflow的效果。
点击了解white-space属性
 点击了解text-overflow属性
 点击了解overflow属性

<div class="bulletin-wrapper">
  <span class="bulletin-text">
	      粥品香坊其烹饪粥料的秘方源于中国千年古法，
	      在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、
	      0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。
	      是2008年奥运会和2013年园博会指定餐饮服务商。
  </span>
</div>

在这里插入图片描述
设置前：如果不进行任何设置，就会出现上图中的情况，部分文字被截取，影响视图效果。
设置后：

  .bulletin-wrapper
    height 28px
    line-height 28px
    padding 12px 0 12px 0
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    background rgba(7,17,27,0.2)

通过给父元素设置 overflow： hidden， text-overflow： ellipsis；background：rgba(7,17,27,0.2)。就可以实现用省略号代替溢出效果
在这里插入图片描述
重点：该设置在一种情况下会出现bug，有时候为了解决两个inline-block并排出现空白间隙的问题，我们会给父元素设置font-size=0的情况，但这会让“…”消失，如下图

在这里插入图片描述

如果出现这种情况，我们就找其他的办法来解决空白间隙的情况，鹅肉使用inline-block。

2.解决两个inline-block并排出现空白间隙的情况

两个inline-block框并排时容易出现空白间隙，影响整个页面布局，这里提出几种几种解决办法

方法一

两个行内框的父元素设置 font-size:0 的属性，就可以解决，如果行内框有文字要展示，可以在给行内框设置字体大小。

方法二

只需要在编写标签时，将两个标签之间的空隙设置为0

//修改前
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span>
      <span class="bulletin-text">{{seller.bulletin}}</span>
    </div>

//修改后
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
    </div>