CODEWITHSUNDEEP
phpjavascriptjqueryhtml
MEMPHIS
MEMPHIS

Reputation: 29

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

Upvotes: 0

Views: 186

Answers (5)

JakeJ
JakeJ

Reputation: 1381

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.

Upvotes: 0

MEMPHIS
MEMPHIS

Reputation: 29

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

Upvotes: 0

Robby Shaw
Robby Shaw

Reputation: 4915

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.

Upvotes: 0

AmGates
AmGates

Reputation: 2123

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

regards

Upvotes: 1

Prisoner
Prisoner

Reputation: 27618

This should do it:

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

Upvotes: 1

Related Questions