当前位置：文江博客话题详情

将文本换行在中标签

发布于 2024-07-25 06:29:02 字数 156 浏览 6 评论 0 原文

我想包装一些添加到元素中的文本。我尝试过 style="word-wrap: break-word;" 宽度=“15%”。但它没有换行文本。是否强制规定其宽度为 100%？我还有其他控件要显示，因此只有 15% 的宽度可用。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

固执像三岁 2024-08-01 06:29:03

这可能会起作用，但在将来的某个时候（如果不是立即）可能会被证明有点麻烦。

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

span 的基本原理是，正如其他人指出的那样，通常会扩展以容纳内容，而 则通常会扩展以容纳内容。 可以给定并期望保持设定的宽度； overflow:hidden 旨在（但可能不会）隐藏会导致展开的内容。

我建议使用跨度的 title 属性来显示可视单元中存在（或剪辑）的文本，以便文本仍然可用（如果您不希望/不需要人们看到它，那么为什么首先要拥有它，我猜......）。

另外，如果您为 td {...} 定义宽度，则 td 将扩展（或可能收缩，但我对此表示怀疑）以填充其隐含宽度（据我所知，这似乎是table-width/number-of-cells），指定的表格宽度似乎不会产生相同的问题。

缺点是用于演示的额外标记。

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 原文

痴情 2024-08-01 06:29:03

对我来说，解决方案是将以下内容添加到文本需要换行的此类列中： white-space:normal

Chrome 和 Chrome 中的相同行为火狐。

笔记：
我在使用 Vue/Quasar q-table 时遇到了这个问题。
我通过 css/sass 限制了列的最大宽度（不确定这对于 Quasar 的 q-table 是否正确）。

回复收藏 0 原文

清晨说晚安 2024-08-01 06:29:03

将类应用于您的 TD，应用适当的宽度（记住将其中一个宽度保留为无宽度，以便它采用其余宽度），然后应用适当的样式。将下面的代码复制并粘贴到编辑器中，然后在浏览器中查看以查看其功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>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.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">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.</td>
  </tr>
</table>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>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.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">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.</td>
  </tr>
</table>
</body>
</html>

回复收藏 0 原文

傲鸠 2024-08-01 06:29:03

实际上，文本换行在表格中自动发生。人们在测试时犯下的错误是假设假设一个长字符串，如“gggggggggggggggggggggggggggggggggggggggggggggggg”，并抱怨它没有换行。实际上，英语中没有这么长的单词，即使有，它也很可能会在中使用。

尝试用“在预先确定的情况下对位是迷信的”这样的句子进行测试。

回复收藏 0 原文

梦幻之岛 2024-08-01 06:29:03

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

<!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 原文

软的没边 2024-08-01 06:29:02

换行 TD 文本

首先设置表格样式

table{
    table-layout: fixed;
}

，然后设置 TD 样式

td{
    word-wrap:break-word
}

To Wrap TD text

First set table style

table{
    table-layout: fixed;
}

then set TD Style

td{
    word-wrap:break-word
}

回复收藏 0 原文

面犯桃花 2024-08-01 06:29:02

HTML 表格支持“table-layout:fixed”CSS 样式，该样式可防止用户代理根据其内容调整列宽。您可能想使用它。

回复收藏 0 原文

糖果控 2024-08-01 06:29:02

我相信您已经遇到过表的第 22 条规则。表格非常适合将内容包装在表格结构中，并且它们在“拉伸”方面做得很好，可以满足其所包含内容的需求。

默认情况下，表格单元格将拉伸以适合内容...因此您的文本只会使其更宽。

有几个解决方案。

1.) 您可以尝试在 TD 上设置最大宽度。

<td style="max-width:150px;">

2.) 您可以尝试将文本放入包装元素（例如跨度）中并对其设置约束。

<td><span style="max-width:150px;">Hello World...</span></td>

请注意，旧版本的 IE 不支持最小/最大宽度。

由于 IE 本身不支持最大宽度，因此如果您想强制它支持最大宽度，则需要添加一个 hack 。添加 hack 有多种方法，这只是其中一种。

页面加载时，仅适用于 IE6，获取表格的渲染宽度（以像素为单位），然后获取其中的 15% 并将其作为宽度再次应用到该列中的第一个 TD（如果有标题，则为 TH），以像素为单位。

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.

<td style="max-width:150px;">

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

<td><span style="max-width:150px;">Hello World...</span></td>

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.

回复收藏 0 原文

意中人 2024-08-01 06:29:02

使用word-break可以使用它，而无需将table样式设置为table-layout:fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

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
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

回复收藏 0 原文

御守 2024-08-01 06:29:02

table-layout:fixed 将解决单元格扩展问题，但会创建一个新单元格。默认情况下，IE 将隐藏溢出，但 Mozilla 会将其呈现在框外。

另一种解决方案是使用：overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

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

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

回复收藏 0 原文

葮薆情 2024-08-01 06:29:02

这对我来说适用于一些 css 框架（material design lite [MDL]）。

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

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;
}

回复收藏 0 原文

叫嚣ゝ 2024-08-01 06:29:02

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

归功于 http://www.blakems.com/archives/000077.html

.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

回复收藏 0 原文

温柔一刀 2024-08-01 06:29:02

我的一些 td 是这样的：

white-space: pre;

这为我解决了这个问题：

white-space: pre-wrap;

I had some of my tds with:

white-space: pre;

This solved it for me:

white-space: pre-wrap;

回复收藏 0 原文

鸠魁 2024-08-01 06:29:02

这非常有效：

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

您可以对所有 使用相同的宽度，或者调整每种情况的宽度以在您喜欢的任何位置中断文本。

这样你就不必浪费时间使用固定的表格宽度或复杂的 CSS。

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 原文

西瓜 2024-08-01 06:29:02

要使单元格宽度与文本中最长的单词完全相同，只需将单元格宽度设置为1px

即可，即

td {
  width: 1px;
}

这是实验，我在做<时才知道这一点强>反复试验

现场小提琴：http://jsfiddle.net/harshjv/5e2oLL8L/ 2/

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 文章

0 评论

558 人气

关注发私信

友情链接

文江博客

将文本换行在中标签

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（15）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

将文本换行在 中 标签

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（15）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

将文本换行在中标签

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。