使用 shape-outside 将文本与底部对齐？

Question

我有一些使用 shape-outside 包装的文本。如何将其与底部对齐？

在父级上使用 flexbox 会破坏浮动，因此不再进行包装。使用绝对定位会忽略形状。

main {
  width: 300px;
  height: 300px;
  border: dotted 1px lightgray;
}

div {
  width: 100%;
  height: 100%;
  float: left;
  shape-outside: polygon(0 0, 50% 0, 0 100%);
}

<main>
  <div></div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Vestibulum viverra est quis fermentum pulvinar. Morbi feugiat pretium massa, id accumsan lacus tempus nec.</span>
</main>

Answer 1

您可以获取外部元素的offsetHeight，减去文本的高度并将结果作为顶部填充。然而，这留下了一个空白，因为现在文本进一步向下，它的高度更小并且计算有点偏离。所以，我所做的（必须有更好的解决方案）是计算三遍。看看吧：

var mainHeight = document.getElementById('main').offsetHeight;

var oldHeight = document.getElementById('insider').offsetHeight;
var padding = (mainHeight-oldHeight);
document.getElementById("text").style.padding = padding+"px 0 0 0";

//Two more times to fix the gap

oldHeight = document.getElementById('insider').offsetHeight;
padding = (mainHeight-oldHeight);
document.getElementById("text").style.padding = padding+"px 0 0 0";

oldHeight = document.getElementById('insider').offsetHeight;
padding = (mainHeight-oldHeight);
document.getElementById("text").style.padding = padding+"px 0 0 0";

main {
  width: 300px;
  height: 300px;
  border: dotted 1px lightgray;
  background-color:wheat;
}

main div.empty {
  width: 100%;
  height: 100%;
  float: left;
  shape-outside: polygon(0 0, 50% 0, 0 100%); 
}

<main id="main">
  <div class="empty"></div>
  <div class="text" id="text"><span id="insider">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit.</span></div>
</main>