css wordwrap, how does it work?

Question

i've got a table that need to look not ugly on a phone but on my phone the first text doesnt get split by default but the text with - will

is there a way to split a Text that isnt cut off by space or - with CSS?

// WHAT I MEAN

.small{
  max-width: 10px;
}

<div class="small">
<span>This Text gets split</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>ThisWontGetSpilt</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>This-Will-Get-Split-As-Well</span>
</div>

https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/ — Paulie_D, May 18 '18 at 12:30

score 5 · Accepted Answer · answered May 18 '18 at 12:33

Use overflow-wrap: break-word;

.small{
  max-width: 50px;
  overflow-wrap: break-word;
}

<div class="small">
<span>This Text gets split</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>ThisWontGetSpilt</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>This-Will-Get-Split-As-Well</span>
</div>

Hope this is what you are looking for.

score 1 · Answer 2 · answered May 18 '18 at 12:35

1

You can use word-break: break-all; to achieve this effect.

.container {
  background-color: grey;
  padding: 1rem;
  width: 100px;
  word-break: break-all;
}

<div class="container">
  <p>This is too long for the container, but get's broken properly with the word-break css property.</p>
</div>

answered May 18 '18 at 12:35

Quinton Tomah-Hamilton

206
2
6

Sure, but in OPs example that breaks after each letter so not the ideal one. – VXp May 18 '18 at 12:39
1

I agree, should have paid more attention to the original question. For anyone reading this after the fact, Serge Inácio has a better answer since it maintains word readability. – Quinton Tomah-Hamilton May 18 '18 at 12:45

css wordwrap, how does it work?

2 Answers2