2

Is it possible to make container with text to shrink as arrow 1 shows on a picture, using CSS? Instead of having empty space where word didn't fit.

with word-break: break-all you can eliminate that empty space by having words fitting there until break, but that's not desired behavior.

.container {
  border: 1px solid black;
  padding: 2px;
  display: flex;
}

.text {
  border: 1px solid red;
  margin-right: 2px;
}

.indicator {
  border: 1px solid blue;
}

.indicator:after {
  content: '\23F7';
}
<div class="container">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="indicator"></div>
</div>

containers

OlehZiniak
  • 933
  • 1
  • 13
  • 29
  • @Paulie_D any suggestions how I could get away with that? Basically what I need is that black arrow always to be at the end of the first line, no meter how many lines – OlehZiniak May 05 '17 at 11:51
  • Not possible with CSS. There are JS solutions (see the links above) but otherwise...you may have to re-think. – Paulie_D May 05 '17 at 11:54

0 Answers0