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

Question

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?

Josh Crozier · Accepted Answer · 2015-04-08 20:29:03Z

9

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>

answered Apr 8, 2015 at 20:23

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

funny, doesn't work for me in the 'Run code snippet'

@deW1 That's odd... I didn't realize word-break: break-word wasn't supported in FF... break-all seems to.

I was pretty sure that it was at least some time ago.

@deW1 Yeah, me too.. I've been using it for a few years without any issues.. if anything I just remember IE8 being problematic..

Gaurav · Accepted Answer · 2020-06-22 18:31:02Z

1

This will also suffice

div {
  word-wrap: break-word;
}

answered Jun 22, 2020 at 18:31

Gaurav

8699 silver badges11 bronze badges