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

Question

I want the dash to be vertically centered with the text on the right and I want them to be 10px apart. But when I'm using flex, the text on the right wraps normally, but takes more than its content's actual size, and now the gap between the two spans is too wide. Is there an elegant solution to this ?

 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

I found a way to do it, but I'm not too happy with it. Here it is :

 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

Use word-break: break-all; working fine

 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

To align to the right you need to put the display: flex property on the parent element.

If I understand your question, the solution is: jsfiddle.net/gabrielpito/y6jog29x/