小技巧|CSS如何实现文字两端对齐

时间 2019-11-06

标签技巧 css 如何实现文字两端对齐栏目 CSS 繁體版

原文原文链接

需求以下，红框所在的文字有四个字的、三个字的、两个字的，若是不两端对齐能够选择居中对齐，或者右对齐。可是若是要像下面这样两端对齐呢？
css

我相信之前不少人都这么干过：两个字中间使用 来隔开达到四个字的宽度，三个字也能够，可是，像上图中“122帐号”“122密码”这样的，就很差计算该用几个空格了。html

假如咱们有以下HTML：segmentfault

<div>这世间惟有梦想和好姑娘不可辜负！</div>

给它加点样式spa

div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}

初始效果是这样的
code

text-align: justify这是什么东西？CSS2中text-align有一个属性值为justify，为对齐之意。其实现的效果就是能够让一行文字两端对齐显示（文字内容要超过一行）。htm

可是光使用它依然没什么卵用…..rem

要使文字两端对齐，咱们还得使用一个行内空标签来助阵，好比<span>、<i>等等，这里是我用<i>标签get

<div>这世间惟有梦想和好姑娘不可辜负！<i></i></div>

给这个i标签设置以下样式it

div i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;
}

padding-left: 100%和width:100%均可以达到效果，选用其一便可。效果以下
class

可是加入HTML元素又违反告终构表现分离的原则，咱们能够改用after、before伪元素：

div:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

感谢 @依韵_宵音的提醒