Question 45772 in CSS Question posted in
Some basic documentation can be found here.

Prevent icon at end of <p> to break by itself – CSS

My problem: My clock icons break off like this on some phone screens
clocks-break-bad
How it should be: They should take the time value with them and break together like this:
clock-breaks-nicely

Here’s the HTML:
https://jsfiddle.net/jfta78n3/

And just in case it could become relevant, because it makes it difficult to wrap something around just the time and the icon without also wrapping the rest of the date –
I’m generating the part in question like this with Vue 3:

{{
  formatDate(
    show.dateExport,
    show.timeStart ? "long" : "short"
  )
}}
<span v-if="show.timeStart">
  <i class="bi-clock-fill" />
</span>
Tags:

2

Answers


  1. 0

    Wrap anything that shouldn’t break in a <span> and style it with white-space: nowrap

    <p class="small m-0 font-monospace" style="">
  Sa., 26. Oct 2030, <span class="nobreak">20:30 <i class="bi-clock-fill"></i></span>
</p>

    .nobreak {
  white-space: nowrap;
}

    updated jsfiddle

    Login or Signup to reply.
  2. 0

    Found a solution by wrapping the time with the span:

    <td class="align-middle">
    <!--v-if-->
    <p class="small m-0 font-monospace" style="">Sa., 26. Oct 2030, <span class="text-nowrap"> 20:30 <i class="bi-clock-fill"></i></span></p>
</td>

    And adding the text-nowrap from bootstrap to the span.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search