CODEWITHSUNDEEP
jqueryhtmlcss
Zach Smith
Zach Smith

Reputation: 5684

how to force break words that exceed width of parent div

i am running into an issue that i do not think is possible with css. i have a text output dynamically showing in a label that only has the following html

label { width:94px; }

i am trying to come up with a solution that will dynamically take any mutliple word that exceeds the width of the div, and force break that word. if a word is to be split but could fit on its own line without breaking within the text, then wrap it to the next line

an example of this working fine as is would be the following screenshot: enter image description here

here is the current scenario where a letter inside a word is pushed to the next line: enter image description here

here is what i would like to happen in this scenario: enter image description here

any help would be greatly appreciated. i am very curious if this is even possible with css without a lot of hacks and cross-browser issues...

Upvotes: 1

Views: 3824

Answers (4)

earphonewx
earphonewx

Reputation: 1

you can try word-wrap:break-word; or word-break:break-all;

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

By default, it should wrap (example 1)

use word-break: keep-all; (example 2)

But when a word is too long you need to use overflow-wrap: break-word; (example 3)

p {
  width: 140px;
  border: 1px solid #000000;
}

p.test1 {
  word-break: keep-all;
}

p.test2 {
  overflow-wrap: break-word;
}
<p class="test">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>

<p class="test2">This paragraph contains some text. The lines will break at any character. verylongtextnonstoplolstillnotdonesorry</p>

Upvotes: 2

Pawan Kumar
Pawan Kumar

Reputation: 1374

Try the below css, your line break will now depend on the width of span

span{
  width:20%;
  display:flex;
  background-color:yellow;
}

div{
  width:100%;
  border:1px solid red;
}
<div><span>how to force break words</span></div>

Upvotes: 0

Baptiste Arnaud
Baptiste Arnaud

Reputation: 2750

I guess word-wrap:break-word; would do the job

Upvotes: 0

Related Questions