Break line into links

Asked

Viewed 2,967 times

0

I’m developing a mobile site and I’m having a problem, when I have a very large link (no spaces or '-' hyphens), it doesn’t "break" and leaks the layout. There’s a way to fix it?

html css
  • 1

    Have you ever tried to set a width for div? Put the code here, it’s easier to analyze.

1 answer

3

You can use the property word-wrap to manipulate word breaking

p.test {
  width: 100px;
  border: 1px solid #000000;
  word-wrap: break-word;
}
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

or

#div1 {
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #000000;
}

#div2 {
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}
<p>As duas divs coném um texto muito lonbgo que não cabe na caixa, como você pode ver o texto é cortado</p>

<p>Essa div usa "text-overflow:clip":</p>
<div id="div1">Este é apenas um looongo texto que não cabe na caixa</div>

<p>Essa div usa "text-overflow:ellipsis":</p>
<div id="div2">Este é apenas um looongo texto que não cabe na caixa</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.