Question 42629 in Html Question posted in
Some basic documentation can be found here.

CSS: How can I break a timestamp – or any other sentence – at the colon – Html

I think I got all combinations of word-break and overflow-wrap in this jsfiddle.

https://jsfiddle.net/thcurgsw/1/

I have timestamps in the format YYYYMMDD:HHMMSS and want the CSS to break them at the colon. But neither in FireFox nor in Chrome do they break as one would expect them to do: they break in the middle of the number, but not at the colon. Do I miss another CSS-setting here or is this a browser bug?

PS: I also tried combinations of line-break to no avail.

The expected behaviour is whitespace > interpunctuation > hyphens > anything else

Tags:

2

Answers


  1. 0 
    div {
  width:7em;
  background: #f88;
  margin: 0.2em;
  display: flex;
  flex-wrap: wrap;
}
    <div class="wn on"><span>20230416:</span>204704</div>
    Login or Signup to reply.
  2. 0

    You should only add width: fit-content; attribute to div. And take the code in to the <div> which section you want to wrap second line. You can check it from below snippet.

    div {
  width:7em;
  background: #f88;
  width: fit-content;
}
    <div class="wn on">20230416:<div>204704</div></div>
<br>
<div class="wa on">20230416:<div>204704</div></div>
<br>
<div class="wk on">20230416:<div>204704</div></div>
<br>
<div class="ww on">20230416:<div>204704</div></div>
<br>
<div class="wn ow">20230416:<div>204704</div></div>
<br>
<div class="wa ow">20230416:<div>204704</div></div>
<br>
<div class="wk ow">20230416:<div>204704</div></div>
<br>
<div class="ww ow">20230416:<div>204704</div></div>
<br>
<div class="wn oa">20230416:<div>204704</div></div>
<br>
<div class="wa oa">20230416:<div>204704</div></div>
<br>
<div class="wk oa">20230416:<div>204704</div></div>
<br>
<div class="ww oa">20230416:<div>204704</div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search