Text Not Wrapping in Paragraph Element

Text not wrapping in paragraph element

Word wrapping only occurs when there is a word break.

If you have a "word" that is as long as that, then there is no place for it to break.

The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).

Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.

p { word-break: break-all }

(Note browser support).

Alternatively, you can use overflow to truncate the text if it won't fit in the container.

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

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>

Text inside a span element does not wrap within the width the parent p tag

you need to look at the word-wrap ban for tag p or span. white-space: nowrap or something similar.

Find text in element that is NOT wrapped in html tags and wrap it with p

Use contents() and filter() to get text node

$('.menu-content')  .contents() // get all child node including text and comment   .filter(function() { // filter the text node which is not empty    return this.nodeType === 3 && $.trim(this.textContent).length  }).wrap('</p>'); // wrap filtered element with p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="menu-content">  <h3>Lorem Ipsum</h3>  TEXT THAT NEEDS TO BE WRAPPED  <ul>    <li>List Item 1</li>  </ul></div>

---

Related Topics