Css表示一个元素，该元素允许在子div上使用break word，但也可以扩展到子div的宽度_Css_Webkit_Word Break

Css表示一个元素，该元素允许在子div上使用break word，但也可以扩展到子div的宽度

css

Css表示一个元素，该元素允许在子div上使用break word，但也可以扩展到子div的宽度,css,webkit,word-break,Css,Webkit,Word Break,我试图确定是否可以为一个支持wordwrap:break-word的元素创建css，但当不能进行break时，该元素也会扩展到其子元素的宽度 <html> <style> .outer { background-color:red; word-wrap:break-word; } </style> <div class="outer"> User generated content: <a

我试图确定是否可以为一个支持

wordwrap:break-word

的元素创建css，但当不能进行break时，该元素也会扩展到其子元素的宽度

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


.外部{
背景色：红色；
单词包装：打断单词；
}
用户生成的内容：
asdfasdfadsffdsasdfasdfsadfafsd
ASDFASDFADSFFDAASDFASDFFAAFASDS

在上面的示例中，url正确断开，但是如果窗口比表小，则表和img溢出红色的外部div

如果我使用外部div display:inline块或display:table，则红色的外部div将正确扩展以包含内容，但如果窗口比url窄，则url不会中断

我只需要在WebKit（Android上）中使用它，如果可能的话，我正试图找到一个只使用CSS（无Javascript）的解决方案。

分配

宽度：100%和使用表格布局：固定强制td单元格与表格匹配，并允许文本换行
<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>

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

我不知道移动webkit，但它在Chrome中起作用

如果我正确理解了您的需要，那么您所需要的就是溢出：自动
设置为.outer
。下面是一个例子：（在safari和chrome上测试）
更新：
在你的滚动相关评论之后，我尝试了一些其他的解决方案，我发现了一些甚至可以满足这一点的东西。我会提前说它是脏的，但是如果你能处理绝对定位的内容，并且你愿意复制生成的标记，我希望它能工作（至少在我的本地safari上是这样）
解决方案是复制您的内容，并将新内容包装在另外两个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>

我想指出，之所以需要just-a-helper-wrapper
，仅仅是因为outer-fixed*
没有选择文本节点（即不在另一个标记中的内容）-例如，示例中的字符串用户生成的内容：
仍然可见。如果您实际上没有此类内容，可以将其删除
这是链接：
我觉得DRAVER有答案，但我怀疑你不希望在 div <代码>屏幕中间显示一个滚动条。如果是这样的话，根据您的限制，您可以尝试将
div
设置为窗口：
CSS
看看CSS规范，我试图做的很可能是不可能的，尽管我发现尺寸计算很难理解。以下是一些重要信息：

未替换内联元素框的内容宽度为
其中呈现的内容
因此，如果我想让包含框的背景变为子框的宽度，我需要确保它的布局是在内联格式上下文中计算的：

当内联框超过行框的宽度时，它将拆分为
几个盒子，这些盒子分布在几条线上
盒。如果无法拆分内联框（例如，如果内联框
包含单个字符或特定于语言的分词规则
不允许在内联框内中断，或者如果内联框为
受空白值nowrap或pre）的影响，然后是内联框
溢出线路盒
太好了。希望违反规则也包括紧急包装的可能性

此属性指定UA是否可以在要删除的字内中断
防止在其他情况下无法断开的字符串太长而无法使用时溢出
安装在线路盒内
没有真正的帮助；让我们看看更新的规范草案：

中断机会不是“溢出换行：正常”换行的一部分
在计算“最小内容”固有大小时不考虑
这还不是很清楚，但如果“最小内容”的内在大小与用于确定断线可能性的相同计算有关，我可能就不走运了

我最终只是使用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';
  }
}

var messages=document.body.getElementsByClassName（'mail_uncollapsed'）；
//通过将元素显示设置为内联块来显示溢出内容。这
//防止中断字应用于元素，因此我们只执行此操作
//如果元素仍然会溢出。
对于（变量i=0；i
我正在寻找一个只使用css的解决方案，或者证明这样的解决方案是不可能的。不确定这是否是您正在寻找的解决方案，但您确实可以确保css属性“break”总是出现中断。看看这个，给你一张你想要的图片。这是小提琴：@AlexMdisplay:inline block未限制表的宽度。溢出的锚导致背景扩展，使得未包装的表在视觉上不明显。我无法控制用户生成的内容，其中包括表。我在上面添加了一个标记，作为另一个溢出父元素的示例。感谢您的建议。不幸的是，滚动div在移动webkit上不起作用。我可以使用像iScroll这样的js库来进行我自己的滚动，但这并不是我想要的，因为我更喜欢整个页面滚动，而不仅仅是div。你的更新是一个很酷的主意。我在想办法用复制的内容来实现这一点。我不会用这个，但这是值得的赏金。我同意亚历克斯（我很高兴他认识你），你的解决方案显示
html {height: 100%}
body {overflow: auto; height: 100%; margin: 0;}
.outer {
    word-wrap: break-word; 
    background-color: red;
    overflow: auto;
    min-height: 100%;
}

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