如何在应用shape-outside的情况下将文本对齐于底部？

Question

如何在应用shape-outside的情况下将文本对齐于底部？

4

我有一些文本，使用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>

- Lazar Ljubenović

我不明白你所说的“底部对齐”是什么意思。你能展示一下你需要的输出样本（比如图片或其他东西）吗？ - Harry

2

@Harry 我猜他想让文本对齐到盒子的底部。随着我们添加更多的文本，它开始向上移动，但保持其与形状外部属性的对齐...目前，文本与形状外部对齐，但其顶部对齐在盒子中。 - Mohammad Usman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Theodore K. · 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>