10

我正在尝试确定是否可以为支持的元素创建 css word-wrap:break-word,但是当无法破坏时,它也会扩展以获取其子元素的宽度。

<html>
  <style>
  .outer {
    background-color:red;
    word-wrap:break-word;
  }
  </style>
  <div class="outer">
    User generated content:
    <a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
    <table>
      <tr>
        <td>asdfasdfadsffdsasdfasdfsadfafsd</td>
        <td>asdfasdfadsffdaasdfassdffaafasds</td>
      </tr>
    </table>
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
  </div>
</html>

在上面的示例中,url 正常中断,但是如果窗口变得比表格更窄,表格和 img 会溢出红色的外部 div。

如果我将外部 div 设为 display:inline-block 或 display:table,红色外部 div 会正确扩展以包含内容,但如果窗口比 url 窄,则 url 不会中断。

我只需要它在WebKit(在Android上)中工作,如果可能的话,我正在尝试找到一个仅CSS(无Javascript)的解决方案。

4

5 回答 5

8

如果我正确理解了您的需求,那么您所需要的一切都overflow: auto设置在.outer. 这是一个示例: http: //jsfiddle.net/hgLbh/1/(在 safari 和 chrome 上测试)。

更新:

在您的滚动相关评论之后,我尝试了其他一些解决方案,我发现了一些可以满足的东西。我会提前说它很脏,但是如果您可以处理绝对定位的内容并且您愿意复制生成的标记,我希望它可以工作(至少在我的本地 safari 上可以)。

解决方案是复制您的内容并将新内容包装在其他 2 个 div 中,因此 HTML 将类似于:

<div class="outer-fixed">
    <div class="just-a-helper-wrapper">
        ... user generated content
    </div>
</div>
<div class="outer">
    ... same user generated content
</div>

对于 CSS:

.outer,
.outer-fixed {
    background-color:red;
    word-wrap:break-word;
    position: absolute;
    left: 0;
    right: 0;
}

.outer-fixed {
    position: fixed;
    right: 0;
}
.outer-fixed * {
    visibility: hidden;
}

我想指出,这just-a-helper-wrapper只是因为outer-fixed *不选择文本节点(即不在另一个标签中的内容)而需要 - 例如User generated content:,您示例中的字符串仍然可见。如果您实际上没有此类内容,则可以将其删除。

这是链接:http: //jsfiddle.net/hgLbh/2/

于 2011-11-01T00:56:41.847 回答
7

分配width: 100%;和使用table-layout: fixed;强制 td 单元格适合表格并允许文本换行。

  table {
        width:100%;
        table-layout:fixed
      }
于 2011-10-22T19:04:30.537 回答
3

我不了解移动 webkit,但这在 Chrome 中有效

http://jsfiddle.net/HerrSerker/duDTz/1/

.outer {
    background-color:red;
    word-wrap:break-word;
    overflow:hidden;
  }

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

.outer * {
    max-width: 100%;
}
于 2011-10-29T14:59:22.403 回答
2

在我看来,draevor 有答案,但我怀疑你不希望滚动条出现在div. 如果是这样,并且根据您的限制,您可以尝试这样做来制作div窗口:

CSS

html {height: 100%}
body {overflow: auto; height: 100%; margin: 0;}
.outer {
    word-wrap: break-word; 
    background-color: red;
    overflow: auto;
    min-height: 100%;
}
于 2011-11-03T18:26:29.343 回答
2

查看 CSS 规范,很可能我试图做的事情是不可能的,尽管我发现尺寸计算相当难以破译。以下是一些重要的部分:

http://www.w3.org/TR/CSS21/visudet.html

未替换的内联元素框的内容宽度是其中呈现的内容的宽度

因此,如果我希望包含框的背景增长为子项的宽度,看来我需要确保它的布局是在内联格式上下文中计算的:

http://www.w3.org/TR/CSS21/visuren.html#normal-flow

当一个 inline box 超过 line box 的宽度时,它会被分割成几个 box,这些 box 分布在几个 line box 上。如果内联框不能被拆分(例如,如果内联框包含单个字符,或特定语言的分词规则不允许内联框内的中断,或者如果内联框受到 nowrap 或 pre 的空白值的影响),则内联框溢出行框。

伟大的。希望打破规则还包括紧急包装的可能性。

http://www.w3.org/TR/2010/WD-css3-text-20101005/#word-wrap

此属性指定 UA 是否可以在一个单词内中断以防止在其他不可中断的字符串太长而无法放入行框中时溢出。

真的没有帮助;让我们看一下较新的草案规范:

http://www.w3.org/TR/css3-text/#overflow-wrap

计算 'min-content' 固有大小时,不考虑不属于 'overflow-wrap: normal' 换行的中断机会。

这不是很清楚,但是如果“最小内容”内在尺寸与用于确定换行可能性的相同计算有关,那么我可能不走运。


我最终只使用 Javascript 来测量内容并决定是在块上下文还是内联上下文中显示它。叹。

var messages = document.body.getElementsByClassName('mail_uncollapsed');

// Show overflowing content by setting element display to inline-block. This
// prevents break-word from being applied to the element, so we only do this
// if the element would overflow anyway.
for (var i = 0; i < messages.length; ++i) {
  var message = messages[i];
  message.style.display = 'block';
  var isOverflowing = message.clientWidth < message.scrollWidth;
  if (isOverflowing) {
    message.style.display = 'inline-block';
  }
}
于 2011-11-03T23:06:45.770 回答