CODEWITHSUNDEEP
htmlcss
None
None

Reputation: 9247

How to force text to break in next row?

I have a problem with a long word: my word goes out of the box. Is there any solution so if I have for example this word lksadlkasdjlaksdjasdasjdklsajdlaskdaskldjasdkladja, to behave like this lksadlkasdjlaksdjasdasjdk- NEXT ROW-> jdlaskdaskldjasdkladja

Any suggestions?

Upvotes: 1

Views: 1005

Answers (3)

Robert Wade
Robert Wade

Reputation: 5003

You can use css word-break or overflow-wrap to accomplish this. And also add css hyphens to indicate the breaks to your readers.

overflow-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

word-break: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

hyphens: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Both examples below:

span {
  background: #eee;
  width:150px;
  height:auto;
  display:block;
  margin-bottom: 1rem;
}

span:nth-child(1){
  word-wrap: break-word;
  hyphens: auto;
}

span:nth-child(2){
  overflow-wrap: break-word;
  hyphens: auto;
}
<span>abcdefghijklmnopqrstuvwxyz</span>
<span>abcdefghijklmnopqrstuvwxyz</span>

Upvotes: 1

Johannes
Johannes

Reputation: 67776

If you know * where* you want the word to split, you can use a "soft hyphen": Insert this code at the desired position: &shy;

If the container is wide enough, the word will be displayed as one, if not, it will break at the soft hyphen:

.a {
width: 200px;
border: 1px solid #ddd;
}

.b {
width: 400px;
border: 1px solid #ddd;
}
<p class="a">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>
<p class="b">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>

Note: There is word-wrap: break-word; , but it will also break shorter words.

Upvotes: 2

Pawan Kumar
Pawan Kumar

Reputation: 1374

You could use word-wrap: break-word; to break the long strings.

span{
  border:1px solid red;
  width:50px;
  height:50px;
  display:block;
  word-wrap: break-word;
  overflow: hidden;
}
<span>jhfhgfhfghdfghdgfdfgdfgdfgdgfdghdgfdgfdgfdgfcgfvchgchvhvhgvchghg</span>

Upvotes: 3

Related Questions