CODEWITHSUNDEEP
htmlcssstring
JayKandari
JayKandari

Reputation: 1268

How to display an unbreaking string in next line with help of css

Here is my code sample

<td width="40%">Field One</td>
<td width="30%">THISISAVERYLONGTEXTSOMEMORECHARACTERSTOMAKEITALITTLELONGERTHISISJUSTFORTESTING</td>
<td width="30%">Field Three</td>

Unable to bring the long text to next line I have also used these following methods in the <td> tag. but same result.
These are :

  1. style="width:200px;"
  2. style="width:100px; overflow:hidden"
  3. style="word-wrap:break-word;

I don't want to scroll the text. Please suggest some option.

Upvotes: 1

Views: 324

Answers (5)

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

CSS might not be cross browser enough or cause some side effects. For those who want alternative, here is pure JavaScript way to force spaces into the long string, thus wrapping it as well.

var cellID = "cell1";
var whatToPush = " ";
var pushAfter = 10;
window.onload = function() {
    var oCell = document.getElementById(cellID);
    var oTable = oCell.parentNode;
    while (oTable && oTable.nodeName.toLowerCase() !== "table")
        oTable = oTable.parentNode;
    if (!oTable) {
        alert("Fatal error: " + cellID + " is not a table cell");
        return;
    }
    var availableWidth = document.body.offsetWidth;
    var tableWidth = oTable.offsetWidth;
    var counter = 0;
    while (tableWidth > availableWidth) {
        if (counter > 100) {
            alert("Warning: word wrap forcing took too many iterations");
            break;
        }
        var rawHTML = oCell.innerHTML;
        var index = rawHTML.length - (pushAfter * (counter + 1));
        if (counter > 0)
            index -= whatToPush.length;
        rawHTML = rawHTML.substring(0, index) + whatToPush + rawHTML.substring(index, rawHTML.length);
        oCell.innerHTML = rawHTML;
        tableWidth = oTable.offsetWidth;
        counter++;
    }
};

The constants in the beginning are pretty much intuitive, it works on a single cell given its ID and pushing some fixed string (e.g. blank space but can also be different string) after fixed amount of characters, counting backwards. (end of contents will split first)

Live test case.

Upvotes: 0

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you

 td {
 padding: 0;
word-break: break-all;
text-align: center;

}
table{

width:100%
}

demo http://jsfiddle.net/nVZHp/3/

Upvotes: 1

Kovalevich
Kovalevich

Reputation: 21

You have a non-breaking text that can not be carried forward to the next line. If you want to move the text to the next line, insert a space in the line.

Upvotes: 0

Ben Broadley
Ben Broadley

Reputation: 632

Are you able to use a soft-hyphen ­ at intervals during your long text string? For Example

<td width="40%">Field One</td>
<td width="30%">THIS&shy;IS&shy;A&shy;VERY&shy;LONG&shy;TEXT&shy;SOME&shy;MORE&shy;CHARACTERS&shy;TO&shy;MAKE&shy;IT&shy;A&shy;LITTLE&shy;LONGER&shy;THIS&shy;IS&shy;JUST&shy;FOR&shy;TESTING</td>
<td width="30%">Field Three</td>

If required, the bowser will automatically split the string wherever you have the soft-hyphen and move the rest on to the next line.

DEMO

Upvotes: 0

matewka
matewka

Reputation: 10168

The problem is word-wrap: break-word doesn't work with elements that have display: table-cell. That includes <td>. You can't resolve it by adding word-wrap directly to the td but you can wrap its content with additional div. The problem will still occur until you set a fixed width for the div. I believe this is the only way to achieve this:

<td width="30%">
    <div>
        THISISAVERYLONGTEXTSOMEMORECHARACTERSTOMAKEITALITTLELONGERTHISISJUSTFORTESTING
    </div>
</td>

Then the CSS:

td > div {
    word-wrap: break-word;
    width: 150px; /* or whatever else */
}

You can't achieve this when relying only on percentage widths. When using percent, the div will still spread to fit its content in one line. The td, then tr and table will follow.

Here's the DEMO: http://jsfiddle.net/nVZHp/2/

Upvotes: 0

Related Questions