HTML TD wrap text

2019-01-04 06:59发布

站内问答 / HTML/CSS
1238 13 6

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.

13条回答
beautiful°
2楼-- · 2019-01-04 07:43

This works really well:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>

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.

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
3楼-- · 2019-01-04 07:46 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2019-01-04 07:48

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2019-01-04 07:50

To Wrap TD text

First set table style

table{
    table-layout: fixed;
}

then set TD Style 

td{
    word-wrap:break-word
}
查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
6楼-- · 2019-01-04 07:50

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

<style> 
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 `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

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; the overflow: 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 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.

查看更多
0人赞 添加讨论(0) 举报
干净又极端
7楼-- · 2019-01-04 07:53

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/

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)