CODEWITHSUNDEEP
htmlcss
Jonas
Jonas

Reputation: 784

CSS don't let element go outside

I have a html list with following items:

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

The problem is when I visualize this with a smaller screen, the EM value goes outside the borders of my list:

enter image description here

enter image description here

What can I do at my css to get the em value inside the borders.

Upvotes: 4

Views: 1287

Answers (3)

Johannes
Johannes

Reputation: 67748

if you want the division with a hyphen at one (or several) particular character/s, you can insert &shy; (="soft hyphen"), also several times:

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

This will break the word at the last "&shy;" position that still fits into the line. If the line is long enough, you won't see those entities.

Upvotes: 0

Brahim Chougrani
Brahim Chougrani

Reputation: 61

you need to set a width to your paragraph and change the width in diffrent screens with Media Queries

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

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>

Upvotes: 6

Related Questions