html text wrap,HTML TD wrap text

问题

I want to wrap some text that is added to a

element.

I have tried with style="word-wrap: break-word;" width="15%".

But it is not wrapping the text. Is it mandatory to give it 100% width?

I have other controls to display so only 15% width is available.

回答1:

To Wrap TD text

First set table style

table{

table-layout: fixed;

}

then set TD Style

td{

word-wrap:break-word

}

回答2:

HTML tables support a "table-layout:fixed" css style that prevents the user agent from adapting column widths to their content. You might want to use it.

回答3:

I believe you've encountered the catch 22 of tables. Tables are great for wrapping up content in a tabular structure and they do a wonderful job of "stretching" to meet the needs of the content they contain.

By default the table cells will stretch to fit content... thus your text just makes it wider.

There's a few solutions.

1.) You can try setting a max-width on the TD.

2.) You can try putting your text in a wrapping element (e.g. a span) and set constraints on it.

Hello World...

Be aware though that older versions of IE don't support min/max-width.

Since IE doesn't support max-width natively you'll need to add a hack if you want to force it to. There's several ways to add a hack, this is just one.

On page load, for IE6 only, get the rendered width of the table (in pixels) then get 15% of that and apply that as the width to the first TD in that column (or TH if you have headers) again, in pixels.

回答4:

table-layout:fixed will resolve the expanding cell problem, but will create a new one. IE by default will hide the overflow but Mozilla will render it outside the box.

Another solution would be to use: overflow:hidden;width:?px

fearofthedarkihaveaconstantfearofadark

test

回答5:

.tbl {

table-layout:fixed;

border-collapse: collapse;

background: #fff;

}

.tbl td {

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

}

Credits to http://www.blakems.com/archives/000077.html

回答6:

This worked for me with some css frameworks (material design lite [MDL]).

table {

table-layout: fixed;

white-space: normal!important;

}

td {

word-wrap: break-word;

}

回答7:

This works really well:

your text

You can use the same width for all your

This way you do not have to fool around with fixed table widths, or complex css.

回答8:

To make cell width exactly same as the longest word of the text, just set width of the cell to 1px

i.e.

td {

width: 1px;

}

This is experimental and i came to know about this while doing trial and error

Live fiddle: http://jsfiddle.net/harshjv/5e2oLL8L/2/

回答9:

use word-break it can be used without styling table to table-layout: fixed

table {

width: 140px;

border: 1px solid #bbb

}

.tdbreak {

word-break: break-all

}

without word-break

LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG

with word-break

LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG

回答10:

It's possible that this might work, but it might prove to be a bit of a nuisance at some point in the future (if not immediately).

tbody td span {display: inline-block;

width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `

`, not the `` or `

overflow: hidden;

white-space: nowrap; }

...

...

... some text some more text yet more text

The rationale for the span is that, as pointed out by others, a

will typically expand to accommodate the content, whereas a can be given -and expected to keep- a set width; the overflow: hidden is intended to, but might not, hide what would otherwise cause the to expand.

I'd recommend using the title property of the span to show the text that's present (or clipped) in the visual cell, so that the text's still available (and if you don't want/need people to see it, then why have it in the first place, I guess...).

Also, if you define a width for the td {...} the td will expand (or potentially contract, but I doubt it) to fill its implied width (as I see it this seems to be table-width/number-of-cells), a specified table-width doesn't seem to create the same issue.

The downside is additional markup used for presentation.

回答11:

Actually wrapping of text happens automatically in tables. The blunder people commit while testing is to hypothetically assume a long string like "ggggggggggggggggggggggggggggggggggggggggggggggg" and complain that it doesn't wrap. Practically there is no word in English that is this long and even if there is, there is a faint chance that it will be used within that

.

Try testing with sentences like "Counterposition is superstitious in predetermining circumstances".

回答12:

Apply classes to your TDs, apply the appropriate widths (remember to leave one of them without a width so it assumes the remainder of the width), then apply the appropriate styles. Copy and paste the code below into an editor and view in a browser to see it function.

Untitled Document

This is the left column. It is set to 20% width.

Hi, I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available. Need help. TIA.

This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.

回答13:

table, th, td {

border: 1px solid black;

}

Poem	Poem
Never increase, beyond what is necessary, the number of entities required to explain anything	Never increase, beyond what is necessary, the number of entities required to explain anything

The nowrap attribute is not supported in HTML5. Use CSS instead.

来源：https://stackoverflow.com/questions/1057574/html-td-wrap-text