我可以根据同一个容器中另一个元素的大小来强制内联文本换行吗? [英] Can I force inline text to wrap depending on the size of another element in the same container?

问题描述

考虑此jsbin .

我有这个html:

  <div class="container">
      <span>
        The lime outlined .container had two vertically stacked elements, this text (which is inline) and the salmon .fixed-width box which is block and has an explicit width and height set externally. I want .container to shrink to the size of .fixed-width and the inline content to wrap. I do not want to have to set an explicit width on .container.
      </span>
      <div>
        <div class="fixed-width"></div>        
      </div>
  </div>

和这个CSS

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
}

/*for debugging*/
.container { outline: 1px solid lime; }  
.container * { outline: 1px solid blue; }

我想要的是 .container 的大小与 .fixed-width 的大小相同，而没有将其显式设置为其他任何位置，从而使内联文本换行且宽度不得超过200像素.

What I would like is for .container to be the same size as .fixed-width without explicitly setting it anywhere else, thereby making the inline text wrap and be no larger than 200px in width.

我敢肯定，css2不可能做到这一点，但是我的浏览器要求非常现代(我在同一页面上使用的是flexbox)，所以我希望有办法使用CSS3.

I'm pretty sure this isn't possible with css2 but my browser requirements are pretty modern (I'm using flexbox on the same page) so I'm hoping there's a way to do it with css3.

如果需要，我愿意在这里引入一些新的标记.

I'm open to introducing some new markup here if need be.

推荐答案

为缩小内容本身，您似乎需要< table> 布局属性.

to shrink content on itself, <table> layout properties seems to be what you need.

非常感谢这个问题，显示了我到目前为止没有注意到的眨眼引擎的行为.

我们可以通过CSS和 edit 使用这些属性，如所注意到的，对于Chrome/Opera使用的Blink渲染引擎，需要一种解决方法.

We can use these properties via CSS and , edit as noticed, for the Blink rendering engine used by Chrome/Opera, a work around is needed .

我们需要在父级上使用设置为0的宽度来尽可能缩小它，因为无论如何，它占用父级宽度的100％:

We need to use a width set to 0 on parent to shrink it as much as possible, since, no matter what, it takes 100% of its parent's width:

http://jsbin.com/UhOQEzOz/2/edit

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
  display:table;
  table-layout:fixed;
}

.container {
  outline: 1px solid lime;
  display:table-row;

}  
.container * {
    outline: 1px solid blue;
  }
article {
  width:0;
}

http://jsbin.com/UhOQEzOz/2/edit

这篇关于我可以根据同一个容器中另一个元素的大小来强制内联文本换行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！