Prevent Text Overflow by Inserting Breaklines - php

Question

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 element?!
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 ?!

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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...)

Answer 5

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.