Remove extra space when text wrap

Question

I have a div with text. Div has a max-width. I want to remove extra space on the right side.

<div class="parent">
  <span>aaa aaa aa aaa aaaaaaaaaaaaa</span>
</div>

.parent {
  background-color: red;
  max-width: 160px
}

https://jsfiddle.net/lukasz9210/t4w2ea9d/8/#&togetherjs=QaNUscE8La

Answer 1

Use white-space: nowrap. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Additionally, you should add overflow: hidden to your parent element so the overflowing text doesn't get displayed.