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

Question

无论屏幕大小如何，我有 2 个单词需要一个放在另一个的下面。

单词 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>

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

How to put 2 words one below the other when using css grid

html

css

word-wrap

css-grid