如何将“第二个”文本放在第一个前面[关闭]答案

【问题标题】：How to put "second" text in front of the first [closed]如何将“第二个”文本放在第一个前面[关闭]
【发布时间】：2020-03-08 10:05:42
【问题描述】：

我怎么能做这样的事情？我试过桌子但没有用。始终如一

Maniac - Last Seen:
Whiteout - Last Seen:

我愿意

Maniac   - Last Seen:
Whiteout - Last Seen:

【问题讨论】：

您可以使用 css-grids、table、flex 或定义第一个文本宽度
在您的问题中发布minimal reproducible example，向我们展示您的尝试

标签： html css

【解决方案1】：

你可以用 css 网格做到这一点：

.grid {
  display: grid;
  grid-auto-rows: auto;
}

.grid-row {
  display: grid;
  grid-template-columns: 120px 10px 1fr;
}

.grid-row span:first-child {
  padding-right: 20px;
}

<div class="grid">
  <div class="grid-row">
    <span>Maniac</span><span>-</span><span>Last Seen:</span>
  </div>
  <div class="grid-row">
   <span>SOme long text here SOme long text here</span><span>-</span><span>Last Seen:</span>
  </div>
</div>

或者如果你想剪切长文本：

.grid {
  display: grid;
  grid-auto-rows: auto;
}

.grid-row {
  display: grid;
  grid-template-columns: 120px 10px 1fr;
}

.grid-row span:first-child {
  padding-right: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; 
}

<div class="grid">
  <div class="grid-row">
    <span>Maniac</span><span>-</span><span>Last Seen:</span>
  </div>
  <div class="grid-row">
   <span>SOme long text here SOme long text here</span><span>-</span><span>Last Seen:</span>
  </div>
</div>

【讨论】：

非常感谢！