如何在使用css网格时将两个单词一个放在另一个下面

Question

我有两个单词，无论屏幕大小，都需要放在一个单词下面。

单词something和else需要在的单独行上

.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
}
.colA {
border: 1px solid red;
}
.colB {
border: 1px solid grey;
word-break: break-all;
}

<div class="wrapper">
<div class="colA">something</div>
<div class="colB">something else</div>
</div>

Fiddle示例：https://jsfiddle.net/kq3sf6ae/

Answer 1

添加word-spacing: 100vw;

.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
}
.colA {
border: 1px solid red;
}
.colB {
border: 1px solid grey;
word-break: break-all;
word-spacing: 100vw;
}

<div class="wrapper">
<div class="colA">something</div>
<div class="colB">something else lt hhjjhhjjhh hhjjhhhjhbhbbbhhjjhhhjhbhbbbhhjjhhhjhbhbbhhjjhhhjhbhbbbb</div>
</div>