Remove gap between items when text wraps

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>

*"Is there an elegant solution to this?"* Not with CSS alone. In CSS / HTML a container has no idea when its content wraps. So it doesn't adjust its size accordingly. https://stackoverflow.com/q/37406353/3597276 — Michael Benjamin, Aug 01 '19 at 12:33
That might be it, I managed to do what I want with absolute positioning but it's not super elegant — The Draft, Aug 01 '19 at 13:06
Right. Not elegant. But hacks exist for a reason. +1 for your answer. — Michael Benjamin, Aug 01 '19 at 13:08

score 1 · Answer 1 · answered Aug 01 '19 at 13:01

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>

answered Aug 01 '19 at 13:01

The Draft

37
8

That sucks... I will keep looking into it – The Draft Aug 01 '19 at 13:13

Lalji Tadhani · Answer 2 · 2019-08-01T13:16:43.577

0

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>

edited Aug 01 '19 at 13:16

answered Aug 01 '19 at 11:46

Lalji Tadhani

14,041
3
23
40

I do want to keep the text centered – The Draft Aug 01 '19 at 12:34

score 0 · Answer 3 · answered Aug 01 '19 at 12:24

0

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/

answered Aug 01 '19 at 12:24

Gabriel Pito

1
1

I want the elements to be side by side – The Draft Aug 01 '19 at 12:34
like this? jsfiddle.net/gabrielpito/y6jog29x/6/ – Gabriel Pito Aug 01 '19 at 12:39
It looks better, but the elements are not vertically centered in your example – The Draft Aug 01 '19 at 12:43
and now? jsfiddle.net/gabrielpito/y6jog29x/9/ – Gabriel Pito Aug 01 '19 at 12:46
It's the dash and the text that I want to have vertically centered – The Draft Aug 01 '19 at 12:50
sorry now I think it's ok jsfiddle.net/gabrielpito/y6jog29x/14/ – Gabriel Pito Aug 01 '19 at 12:54
I hope it is so jsfiddle.net/gabrielpito/y6jog29x/26/ – Gabriel Pito Aug 01 '19 at 13:13
jsfiddle.net/gabrielpito/y6jog29x/27/ – Gabriel Pito Aug 01 '19 at 13:21
there are 2 examples, one without "break-all" and one with – Gabriel Pito Aug 01 '19 at 13:25
The word break all on does what I want, but it's not very readable... Thanks – The Draft Aug 01 '19 at 13:31

Remove gap between items when text wraps

3 Answers3