Prevent Text Overflow by Inserting Breaklines

A question... How can we insert breaks into string and make a multi line string to prevent overflow in axis lengths of an fixed width ele开发者_C百科ment?!

Exapmple Code that include the problem:

<div style="width:100px;">
    Too Long String...
</div>

I need to be like this one:

<div style="width:100px;">
    Too Long String (Line 1st)<br />
    Too Long String (Line 2nd)<br />
    Too Long String (Line 3rd)<br />
    Too Long String (Line 4th)<br />
    ...
</div>

What kind of client side script should i use for ?!

Use the style property "word-wrap: break-word" u will get a multi lined string without overflow.

regards

This should do it:

<div style="width: 100px; word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Not sure about your requirement. If using your code, the long text will show as multi-line text and it won't overflow horizontally by default.

Let me show you all code...

The HTML Code:

<table class="tbl">
    <tr>
        <td><div>Header Codes ans CSS Comes Here</div></td>
        <td><p>Too Long String...</p></td>
    </tr>
</table>

And The CSS Code:

.tbl {
    table-layout:fixed;
    width: 568px;
}
.tbl td {
    border:1px solid #C93;
}

The result is something like this : http://www.4ul.com/uploads/Capture[1].JPG And our too long string go out of the table width (if we set size for the p tag, nothing will changes...)

METHOD

The way I would fix this is by putting a p tag within your div and style is so that it has a width, is floated and has display set to block, this should fix your problem, and this does not include any jQuery so it will reduce client load times.

EXAMPLE:

HTML:

<div class="container">
    <p>
        Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... 
    </p>
</div>

CSS:

.container {
    float:left;
    width:500px;
    background-color:#000000;
}
.container p {
    float:left;
    width:500px;
    display:block;
    color:#FFFFFF;
}

JSFIDDLE: http://jsfiddle.net/8WP4J/

Source:

General knowledge from using HTML and CSS for similar problems

Hope this helps, any issues, feel free to comment.