Wrap Text Inside Fixed Div with CSS or JavaScript

Elements not wrapping inside fixed-width div

I added the bits in bold to your css:

#buttons { width:300px; max-width:300px; border-width:1px; white-space:normal;  border-style:solid; **overflow: auto;** }
#buttons span { **float: left;** cursor:default; padding:10px; white-space: nowrap; }

Can see in action at http://jsfiddle.net/S9rz8/

Think this is what you want?

how to make outer lengthy text wrap around & scroll through a fixed/floating div without hiding some text behind that div

If I'm understanding the problem correctly, it's that you are trying to have your text wrap within the div. In order to accomplish this, try adding the following CSS to your div selector:

word-wrap: break-word;

There may be more to it, but it's hard to tell without the actual CSS and markup. Try including that in your post and we can all get a better idea of how to solve your problem.

UPDATE

Here is a fiddle of my solution in action: http://jsfiddle.net/DrydenLong/9n2WP/

UPDATE #2

So after getting some clarification from your comment above, it seems you are attempting to wrap the text around the div rather than inside of it. Fixed positioning doesn't allow you to wrap around the div. There are some "work-arounds" but they are fairly tough to master and might be more trouble than they are worth... You can see this question for more information: How can I wrap text around a bottom-right div?

How to wrap text vertically within a fixed-height div

This can be done using CSS3 columns quite easily. Here's an example, HTML:

<ul id = "limheight">
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
</ul>

CSS:

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
    display: inline-block; /*necessary*/
}

And a little demo: little link.

Hope that helped!

How can I wrap or break long text/word in a fixed width span?

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

span {     display:block;    width:150px;    word-wrap:break-word;}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

Flexbox.

https://jsfiddle.net/2n6n5oLe/5/

Using your HTML, all you need is:

.content {
  display: flex;
}
.message {
  background-color: yellow;
}

.buttons {
  background-color: lime;
}

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

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 ^_^

Wrap a text within only two lines inside div

Limiting output to two lines of text is possible with CSS, if you set the line-height and height of the element, and set overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Alternatively, you can use the CSS text-overflow and white-space properties to add ellipses, but this only appears to work for a single line.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

And a demo:

--- jsFiddle DEMO ---

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

---

Related Topics