Question

我希望破折号与右侧的文本垂直居中，并且希望它们之间的间隔为10px。但是，当我使用flex时，右侧的文本通常会自动换行，但所占内容比其实际大小还要大，现在两个跨度之间的距离太宽。是否有一个优雅的解决方案？

ul {
  width: 300px;
  list-style: none;
  text-align: center;
  font-size: 20px;
}

li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

span.dash {
  margin-right: 10px;
}

<ul>
  <li><span class="dash">-</span><span>+ 10€ pour séance à domicile (déplacement inclus)</span></li>
</ul>

Answer 1

我找到了一种方法，但是我对此不太满意。这是：

ul {
  width: 300px;
  list-style: none;
  text-align: center;
  font-size: 20px;
}

li {
  position: relative;
}

span.dash {
  position: absolute;
  top: 50%;
  transform: translateX(-300%) translateY(-50%);
}

<ul>
  <li><span class="dash">-</span><span>+ 10€ pour séance à domicile (déplacement inclus)</span></li>
</ul>

Answer 2

使用word-break: break-all;正常

ul {
  width: 300px;
  list-style: none;
  text-align: center;
  font-size: 20px;
}

li {
  position: relative;
  padding-left:15px;
}
span{
  display: block;
  word-break: break-all;
}
span.dash {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

<ul>
  <li><span class="dash">-</span><span>+ 10€ pour séance à domicile (déplacement inclus) 10€ pour séance à domicile (déplacement inclus) </span></li>
</ul>

Answer 3

要向右对齐，您需要在父元素上放置display：flex属性。

如果我理解您的问题，解决方案是： jsfiddle.net/gabrielpito/y6jog29x /

消除文字换行时项目之间的间隙

3 个答案: