Home > Blockchain >  CSS How to wrap text before last whitespace
CSS How to wrap text before last whitespace

Time:03-25

I have some div with fixed width containing text in the form 1234 days ago (10/10/1900).

The text must wrap the date part (10/10/1900) ONLY if string is too long to stay on the same line

I tried to add a new line before the date and apply the rule white-space: break-spaces; but all string are wrapped

Any other attempts to use overflow-wrap or word-break doesn't work as I wish

Have you some idea? Below I show my example code

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.footer {
  width: 170px;
  height: 100px;
  margin-left: 20px;
  padding: 10px;
  white-space: break-spaces;
}

.wrong {
  background-color: red;
  color: white;
}

.correct {
  background-color: blue;
  color: white;
}
<div >
<div >1234 days ago (10/10/1900)</div>
<div >4 days ago (04/05/2050)</div>
</div>
<p >The text "(10/10/1900)" must be wrapped<p>
<p >The text "(04/05/2050)" fits the line so isn't necessary to wrap<p>

CodePudding user response:

Instead of writing "/" use the HTML entity &sol; which should prevent a breakup when pushing the date into the next line.

<div >
<div >1234 days ago (10&sol;10&sol;1900)</div>
<div >4 days ago (04&sol;05&sol;2050)</div>
</div>

CodePudding user response:

Put the dates into span elements with white-space set to pre.

<span style="white-space: pre;">(10/10/1900)</span>

(Note that, if the date is wider than the container's 170px width, it will continue to extend past the box without wrapping.)

  • Related