How to fix empty space between arrow and multiline text?

Asked Jan 17 '18 at 14:02

Active Jan 17 '18 at 18:14

Viewed 195 times

Inside a flexbox block I have multiline text and this text fills all width

<div class="list">
  <div class="item">Lorem</div>
  <div class="item">Lorem ipsum</div>
  <div class="item">Lorem ipsum dolor sit amet</div>
  <div class="item">Lorem</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur</div>
</div>

.list {
    width: 160px;
    padding-right: 10px;
    border: 1px solid #000;
}

.item {
    display: flex;
    margin-bottom: 15px;
    line-height: 1.5;
}

.item::after {
    content: "→";
    align-self: center;
}

https://codepen.io/in-in/pen/XVBqLw

asked Jan 17 '18 at 14:02

dmin

is it a must to have flex? – Lakindu Gunasekara Jan 17 '18 at 14:06
You will need a script for this, if the text will be dynamic. – Asons Jan 17 '18 at 14:20
Since `display: flex` will create an anonymous box around the text, that box won't resize to fit its content when the text wraps, which is how the box model works, so script is needed here. – Asons Jan 17 '18 at 14:40

How to fix empty space between arrow and multiline text?

0 Answers0