下部にテキストを整形して整列しますか？

Question

私は、形状外を使って折り返すテキストをいくつか持っています。 どうすれば底に揃えますか？

親のフレックスボックスを使用すると、浮動小数点が破棄され、それ以上の折り返しはありません。絶対配置を使用すると、形状が無視されます。

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を取得するテキストの高さを引き、トップパディングとして結果を置くことができます。ただし、テキストがさらに下に移動すると、高さが小さくなり、計算が少し遅れてしまうため、ギャップが残されます。だから、私がしたことは（もっと良い解決策がなければならない）、それを3回計算することでした。それをチェックアウト：

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>