CODEWITHSUNDEEP
htmlcssflexbox
The Draft
The Draft

Reputation: 37

Remove gap between items when text wraps

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>

Upvotes: 1

Views: 76

Answers (3)

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

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>

Upvotes: 0

The Draft
The Draft

Reputation: 37

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>

Upvotes: 1

Gabriel Pito
Gabriel Pito

Reputation: 1

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/

Upvotes: 0

Related Questions