允许在子 div 上断字的元素的 CSS，但也可以扩展以获取其子元素的宽度

发布于 2024-12-07 20:45:54 字数 1004 浏览 0 评论 0原文

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

<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）解决方案。

原文

I'm trying to determine whether it's possible to create css for an element that supports word-wrap:break-word, but that also expands to take the width of its children when breaking is not possible.

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

In the above sample, the url breaks properly, but the table and img overflow the red outer div if the window becomes narraower than the table.

If I make the outer div display:inline-block or display:table, the red outer div correctly expands to include the content, but the url doesn't break if the window is narrower than the url.

I only need this to work in WebKit (on Android), and I'm trying to find a CSS only (no Javascript) solution if possible.

分享到QQ

分享到微博

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

发布评论

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

聚集的泪 2024-12-14 20:45:54

如果我正确理解了您的需求，那么您所需要的只是在 .outer 上设置 overflow: auto 。下面是一个示例： http://jsfiddle.net/hgLbh/1/ （在 safari 和 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< /code> 是必需的，只是因为 outer-fixed * 不选择文本节点（即不在另一个标记中的内容） - 例如字符串 User generated content:从你的例子中仍然可见。如果您实际上没有此类内容，则可以将其删除。

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

If I understood what you need correctly, all you need is overflow: auto set on .outer. Here's an example: http://jsfiddle.net/hgLbh/1/ (tested on safari & chrome).

Update:

After your scrolling related comment I've tried a few other solutions and I've found something that satisfies even that. I'll say in advance it's dirty, but if you can handle absolutely positioned content and you are willing to duplicate the generated markup I hope it will work (at least on my local safari it does).

The solution is to duplicate your content and wrap the new content in 2 other divs, so the HTML will look something like:

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

And for the 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;
}

I'd like to point out that the just-a-helper-wrapper is required only because outer-fixed * doesn't select text nodes (ie. content that's not in another tag) - for example the string User generated content: from your example would have still been visible. If you don't actually have that kind of content, you can remove it.

Here's the link: http://jsfiddle.net/hgLbh/2/

回复收藏 0 原文

司马昭之心 2024-12-14 20:45:54

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

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

Assigning width: 100%; and using table-layout: fixed; forces the td cells to fit the table and will allow for text wrapping.

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

回复收藏 0 原文

护你周全 2024-12-14 20:45:54

我不知道移动 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%;
}

I don't know about mobile webkit but this worked in 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%;
}

回复收藏 0 原文

南风起 2024-12-14 20:45:54

在我看来，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%;
}

It seems to me that draevor has the answer, but I suspect that you don't want a scroll bar showing up in the middle of the screen on the div. If that is so, and depending on your limitations, you might try this to make the div the window:

CSS

html {height: 100%}
body {overflow: auto; height: 100%; margin: 0;}
.outer {
    word-wrap: break-word; 
    background-color: red;
    overflow: auto;
    min-height: 100%;
}

回复收藏 0 原文

单身情人 2024-12-14 20:45:54

看看 CSS 规范，我想要做的事情很可能是不可能的，尽管我发现大小计算相当难以破译。以下是一些重要的部分：

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

非替换内联元素框的内容宽度为
其中渲染的内容

因此，如果我希望包含框的背景增长到子项的宽度，那么我似乎需要确保它的布局是在内联格式上下文中计算的：

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

当行内框超过行框宽度时，它会被分割成
几个盒子，这些盒子分布在几条线上
盒子。如果行内框无法拆分（例如，如果行内框
包含单个字符或特定于语言的断词规则
不允许内联框内有中断，或者如果内联框是
受 nowrap 或 pre 的空白值影响），然后是内联框
溢出行框。

伟大的。希望违规规则也包括紧急包裹的可能性。

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

此属性指定 UA 是否可以在单词内中断
当原本牢不可破的字符串太长而无法处理时，防止溢出
适合线框。

并没有真正的帮助；让我们看看新的草案规范：

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

中断机会不是“溢出换行：正常”换行的一部分
计算“最小内容”固有大小时不考虑。

这还不是很清楚，但如果“最小内容”固有大小与用于确定断行可能性的相同计算有关，那么我可能会运气不好。

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

Looking at the CSS spec, it's likely that what I'm trying to do is impossible, although I find the size calculations fairly difficult to decipher. Here are some important bits:

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

The content width of a non-replaced inline element's boxes is that of
the rendered content within them

So if I want the background of my containing box to grow to be the width of the children, it appears I need to make sure it's layout is calulated in an inline formatting context:

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

When an inline box exceeds the width of a line box, it is split into
several boxes and these boxes are distributed across several line
boxes. If an inline box cannot be split (e.g., if the inline box
contains a single character, or language specific word breaking rules
disallow a break within the inline box, or if the inline box is
affected by a white-space value of nowrap or pre), then the inline box
overflows the line box.

Great. Hopefully the breaking rules also include emergency wrapping possibilities.

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

This property specifies whether the UA may break within a word to
prevent overflow when an otherwise-unbreakable string is too long to
fit within the line box.

Doesn't really help; let's look at the newer draft spec:

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

Break opportunities not part of ‘overflow-wrap: normal’ line breaking
are not considered when calculating ‘min-content’ intrinsic sizes.

This isn't very clear, but if 'min-content' instrinsic sizes has something to do with the same calculations used to determine line-breaking possibilities, I might be out of luck.

I ended up just using Javascript to measure the content and decide whether to show it in block or inline context. Sigh.

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

回复收藏 0 原文

~没有更多了~