CSS doesn't let an element go outside

Question

I have an html list with the following elements:

<ul>
...
<li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
...
</ul>
...

The problem is when I render this with a smaller screen, the EM value goes beyond my list:

What can I do in my CSS to get the em value inside the borders.

Answer 1

you can use word-wrap: break-word

li {
  border: 1px solid black;
  width: 100px;
  word-wrap: break-word;
}

<ul>
  <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
</ul>

Run codeHide result

Or word-break: break-all

li {
  border: 1px solid black;
  width: 100px;
  word-break: break-all;
}

<ul>
  <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
</ul>

Run codeHide result

Answer 2

you need to set the width in your paragraph and change the width on different screens using Media Queries

Answer 3

( ) /, ­ (= " " ) :

<span><em>GB15MIDL&shy;400515123&shy;1111456711&shy;11111118</em></span>

"­", . , .