TD 中的 CSS 换行符

发布于 2024-09-02 20:01:02 字数 334 浏览 6 评论 0原文

如果我有一个很长的字符串（没有空格！）。我可以强制浏览器对其进行换行吗，例如，通过 CSS 在表的 td 中换行。宽度似乎没有任何影响。

注意：我知道某人不太可能提交没有空格的长字符串，但你永远不知道......

我尝试过：

.gridrow td
{
    padding: 1em;
    text-align: center;
    word-wrap: break-word; 
}

并且我使用 FF 作为我的浏览器。 word-wrap 似乎只在 CSS3 中使用？

原文

If I have a very long string (without spaces!). Can I force the browser to line break it, for example, in a table's td via CSS. Width does not seem to have any effect.

Note: I know it is very unlikely for someone to submit a long string without spaces but you never know ...

I tried:

.gridrow td
{
    padding: 1em;
    text-align: center;
    word-wrap: break-word; 
}

and I use FF as my browser. word-wrap only seems to be used in CSS3?

分享到QQ

分享到微博

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

发布评论

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

古镇旧梦 2024-09-09 20:01:02

我认为你的意思是在 CSS 中：

#id
{
  max-width: 100px; /*or whatever*/
  word-wrap: break-word;
}

在你的网站上用 Firebug 进行测试，它有效。

参考文章。

I think what you mean is in CSS:

#id
{
  max-width: 100px; /*or whatever*/
  word-wrap: break-word;
}

Tested on your site with Firebug, it works.

Reference article.

回复收藏 0 原文

你与昨日 2024-09-09 20:01:02

表格是一种特殊情况。如果可以的话，他们会继续扩展，以免掩盖任何内容；你也不能对它们使用overflow:hidden。以下是一些选项：

使用可选的中断字符。（来源：http://www.quirksmode.org/oddsandends/wbr.html ) 如果您可以控制以编程方式将或之类的字符插入到长字符串中，这可能是一个解决方案。
也许最好，根据您的情况，您可以限制表格使用严格的宽度，此时它应该遵守您的规则：
<前><代码>表{
表格布局：固定；
宽度：100%；
}
表 td {
自动换行：断词； /* 自 IE 5.5+ 以来的所有浏览器 */
溢出换行：断字； /* CSS3 草案规范中的重命名属性 */
}

Tables are a special case. They'll keep on expanding if they can, so as not to obscure any content; you can't use overflow: hidden on them either. Here are some options:

Use an optional breaking character. (Source: http://www.quirksmode.org/oddsandends/wbr.html ) If you can control insert a character like or <wbr> programatically into long strings, this may be a solution.

Perhaps preferably, depending on your situation, you can limit the table to use strict widths, at which point it should obey your rule:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

回复收藏 0 原文