I want to wrap some text that is added to a <td>
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.
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a way to play audio on a mobile browser w
- HTML form is not sending $_POST values
- implementing html5 drag and drop photos with knock
- Adding a timeout to a render function in ReactJS
This works really well:
You can use the same width for all your
<div
's, or adjust the width in each case to break your text wherever you like.This way you do not have to fool around with fixed table widths, or complex css.
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.
To Wrap TD text
First set table style
then set TD Style
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).
The rationale for the
span
is that, as pointed out by others, a<td>
will typically expand to accommodate the content, whereas a<span>
can be given -and expected to keep- a set width; theoverflow: hidden
is intended to, but might not, hide what would otherwise cause the<td>
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 betable-width/number-of-cells
), a specified table-width doesn't seem to create the same issue.The downside is additional markup used for presentation.
To make cell width exactly same as the longest word of the text, just set width of the cell to
1px
i.e.
This is experimental and i came to know about this while doing trial and error
Live fiddle: http://jsfiddle.net/harshjv/5e2oLL8L/2/