- bounty将于明天到期**。回答此问题可获得+100的声望奖励。Temani Afif希望引起更多人关注此问题：我很确定只使用CSS是不可能的，但是你有机会证明我是错的。PS：我会否决任何使用JavaScript的解决方案（没有阅读它），所以不，甚至不要尝试。
我想创建一个有Angular 的文本流，其中文本行的宽度是一个已知值--w。到目前为止，我所拥有的代码如下：
* { margin: 0 }
html, body { display: grid }
body {
--w: min(35em, 65vw);
--f: 1/ 8;
background: linear-gradient(90deg, transparent var(--w), pink 0);
font: 1em ubuntu, sans-serif
}
.outer-wrapper {
width: min-content;
box-shadow: 0 0 0 2px red;
background: lemonchiffon
}
span::before, span::after {
--i: 0;
--j: calc(1 - var(--i));
--g:
linear-gradient(to right bottom,
hsla(50, 50%, 50%, var(--j)) 50%,
hsla(50, 50%, 50%, var(--i)) 0);
float: left;
height: 100%;
aspect-ratio: var(--f);
background: var(--g);
shape-outside: var(--g);
content: ''
}
span::after {
--i: 1;
float: right
}
.inner-wrapper {
width: var(--w);
box-shadow: inset 0 0 0 2px blue
}<div class="outer-wrapper">
<span aria-hidden="true"></span>
<div class="inner-wrapper">
<p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
<p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
<p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
</div>
</div>问题是，我希望将两侧的浮动伪值添加到--w宽度中，并使.outer-wrapper宽1倍，否则，文本将溢出红色外框。
我不知道如何用CSS来做这些。我知道用JS是可以做到的，我有一个工作版本，我读取px值的高度，将其存储在一个变量中，在调整大小时更新它，然后从那里计算所有内容。但我真的很想只用CSS来做这些。
在这种情况下，倾斜长方体不是有用的解决方案。
3条答案
按热度按时间2admgd591#
它并非没有缺点，可能不适合您的特定用例，但您可以使用一个更窄容器中内容的隐藏副本来确定所需的高度，然后使用
height: 100%为.outer-wrapper提供所需的高度。潜在问题包括：
.outer-wrapper稍大一些是可以接受的，您可以通过给.height-setter1或2 ems的底部填充来添加一行或两行额外的行来覆盖自己。visibility: hidden，screen readers won't see it就是正确的）。.outer-outer-wrapper比它内部显示的内容要宽，在我的屏幕上显示您的代码时，这很好，但实际上，您可能需要一些巧妙的弹性裁剪或设置overflow: hidden的.outer-outer-outer-wrapper来解决这个问题。pqwbnv8z2#
我不相信用
shape-outside和纯css能达到这个效果。然而，如果我们有一点创造性，我们可以操纵transform属性来实现，（我相信是） 您想要的结果。
斜体字有一个不幸的副作用，但这可能是你可以接受的，或者可能纠正。
xyhw6mcr3#
只是要求的纯CSS
如果您使用动态语言打印内容，这将非常容易。
它适用于任何屏幕尺寸。内容的大小无关紧要，它也可以有填充。你也可以改变
--f和--w的值，一切工作了!