CSS Word-Wrapping in Div

Is there a way to word-wrap long words in a div?

Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)

CSS word-wrapping in div

As Andrew said, your text should be doing just that.

There is one instance that I can think of that will behave in the manner you suggest, and that is if you have the whitespace property set.

See if you don't have the following in your CSS somewhere:

white-space: nowrap

That will cause text to continue on the same line until interrupted by a line break.

OK, my apologies, not sure if edited or added the mark-up afterwards (didn't see it at first).

The overflow-x property is what's causing the scroll bar to appear. Remove that and the div will adjust to as high as it needs to be to contain all your text.

Making a paragraph text wrap inside a div

maybe this can help you by a little.. :)

<img src="image.jpg" width="50" height="50" style="float:left;" /><div style="float:left; width:200px; max-width:200px; word-wrap:break-word;">Your text here.</div>

I hope that can help you..
CMIIW ^_^

Text not wrapping inside a div element

That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.

#calendar_container > #events_container > .event_block > .title {
    width:400px;
    font-size:12px;
    word-break:break-all;
}

jsFiddle example

How to force a line break in a long word in a DIV?

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

---

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

CSS 2.1: Wrap Text Inside Div

word-wrap: break-word; is your friend. See your updated JSFiddle.

Text not wrapping inside div element

Check this snippet out. You just need the word-break and the width

#text0 {  word-break: break-word;   width: 500px;   background-color: #afed67; }

<div id="text0">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble        it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Wrapping long text without white space inside of a div

You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.

EDIT

You need to add this property in CSS.

word-wrap: break-word;

css word-wrap doesn't work to fit text into div

You can get rid of all of your flex items and simply do word-break: break-all; like this:

const quotes = [
  {
    text: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
  },
  {
    text: '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
  },
];

const text = document.querySelector('.text');

function randButton() {
  let random = Math.floor(Math.random() * quotes.length);
  text.innerHTML = quotes[random].text;
}

randButton();

.inner-style {
    background: white;
    border-style: solid;
    border-radius: 5px;
    padding: 3px 3px 3px 3px;
    width: 425px;
    word-break: break-all;
}

<div class="style1" >
  <div id="wallet_btc" class="text inner-style"> </div>
</div>
<br/>
<button onclick="randButton()" id="aaa" class="btn btn-primary a55" value="button" type="button" style="font-size:18px">Random</button>

---

Related Topics