CODEWITHSUNDEEP
css
user2076675
user2076675

Reputation:

How do I wrap a long string in a fixed-width container with CSS?

Lets say I have a fixed-width container with a long string inside, no spaces:

div {
    background-color:yellow;
    width:100px;
    height:100px;
    position:relative;
}
<div>veryveryveryveryveryveryveryveryveryveryveryverylongstring</div>

How do I force the text to wrap via CSS? And what control do I have over that wrapping style (using a hyphen or not for example)?

I'm aware of the text-wrap property, but that doesn't seem to apply to a long string like this. Maybe I'm wrong. Could someone please explain this?

Upvotes: 5

Views: 5711

Answers (2)

Gaurav
Gaurav

Reputation: 859

This will also suffice

div {
  word-wrap: break-word;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240978

You're looking for the word-break property. You could use word-break: break-all:

div {
    background-color: yellow;
    width: 100px;
    height: 100px;
    position: relative;
    word-break: break-all;
}
<div>veryveryveryveryveryveryveryveryveryveryveryverylongstring</div>

Upvotes: 9

Related Questions