宽度取决于子元素的宽度和内容高度

Question

我想创建一个有角度的文本流，其中文本行的宽度是已知值--w. What I have so far is the code below:

\n

\r\n

\r\n

* { margin: 0 }\n\nhtml, body { display: grid }\n\nbody {\n  --w: min(35em, 65vw);\n  --f: 1/ 8;\n  background: linear-gradient(90deg, transparent var(--w), pink 0);\n  font: 1em ubuntu, sans-serif\n}\n\n.outer-wrapper {\n  width: min-content;\n  box-shadow: 0 0 0 2px red;\n  background: lemonchiffon\n}\n\nspan::before, span::after {\n  --i: 0;\n  --j: calc(1 - var(--i));\n  --g: \n    linear-gradient(to right bottom, \n        hsla(50, 50%, 50%, var(--j)) 50%, \n        hsla(50, 50%, 50%, var(--i)) 0);\n  float: left;\n  height: 100%;\n  aspect-ratio: var(--f);\n  background: var(--g);\n  shape-outside: var(--g);\n  content: \'\'\n}\nspan::after {\n  --i: 1;\n  float: right\n}\n\n.inner-wrapper {\n  width: var(--w);\n  box-shadow: inset 0 0 0 2px blue\n}

\r\n

<div class="outer-wrapper">\n  <span aria-hidden="true"></span>\n  <div class="inner-wrapper">\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

问题是我希望侧面的浮动伪值增加宽度--w并使.outer-wrapper wider by the width of one because otherwise, text overflows outside the red outline box.

\n

\n

我不知道如何用 CSS 做到这一点。我知道用 JS 是可能的，我有一个工作版本，我读过px-valued height, store it in a variable, update it on resize and compute all from there. But I\'d really like to do it with just CSS.

\n

在这种情况下，倾斜盒子并不是一个有用的解决方案。

\n

Answer 1

它并非没有缺点，并且可能不适用于您的特定用例，但您可以使用较窄容器中内容的隐藏副本来确定您需要的高度，然后用于height: 100%给出.outer-wrapper所需的高度。这是我的代码：

\n

* { margin: 0 }\n\nhtml, body { display: grid }\n\nbody {\n  --w: min(35em, 65vw);\n  --f: 1/ 8;\n  background: linear-gradient(90deg, transparent var(--w), pink 0);\n  font: 1em ubuntu, sans-serif\n}\n\n.outer-outer-wrapper {\n  height: auto;\n  display: flex;\n}\n\n.height-setter {\n  background: lightgreen;\n  width: calc(var(--w) * (1 - var(--f)));\n  visibility: hidden;\n}\n\n.outer-wrapper {\n  width: min-content;\n  box-shadow: 0 0 0 2px red;\n  background: lemonchiffon;\n  height: 100%;\n}\n\nspan::before, span::after {\n  --i: 0;\n  --j: calc(1 - var(--i));\n  --g: \n    linear-gradient(to right bottom, \n        hsla(50, 50%, 50%, var(--j)) 50%, \n        hsla(50, 50%, 50%, var(--i)) 0);\n  float: left;\n  height: 100%;\n  aspect-ratio: var(--f);\n  background: var(--g);\n  shape-outside: var(--g);\n  content: \'\'\n}\nspan::after {\n  --i: 1;\n  float: right\n}\n\n.inner-wrapper {\n  width: var(--w);\n  box-shadow: inset 0 0 0 2px blue;\n}\n

\n

<div class="outer-outer-wrapper">\n<div class="outer-wrapper">\n  <span aria-hidden="true"></span>\n  <div class="inner-wrapper">\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n  </div>\n</div>\n  \n  <div class="height-setter">\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon drag\xc3\xa9e tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu drag\xc3\xa9e 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\xc3\xa9 donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>\n  </div>\n</div>\n

\n

潜在的问题是：

\n

\n
• 由于换行位置的原因，不能保证高度正确。.outer-wrapper如果有点太大是可以接受的，您可以通过提供.height-setter1 或 2 em 的底部填充来添加一到两行额外的线来覆盖自己。
\n
• 您的代码中有重复的内容（尽管我相信只要设置了屏幕阅读器就看不到它）。visibility: hidden
\n
• .outer-outer-wrapper比其中显示的内容更宽。在我的屏幕上使用您的代码，这很好，但实际上您可能需要一些巧妙的柔性裁剪或.outer-outer-outer-wrapperwithoverflow: hidden集来解决这个问题。
\n

\n