将按钮与文本保持在同一行

Question

我有一个项目列表，其中只有将鼠标悬停在相应的行上时，按钮才可见。

问题是，当标题占据所有宽度，然后在下面交换按钮。此列表第三行的示例（请参见下文）。

如何使按钮保持原位并减少文本，如下所示。

Answer 1

像这样限制文本div的宽度

.text-div {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } 

Answer 2

请使用flex和align-item属性来解决您的问题。

p {
  display: none;
  margin-left: 20px;
}

h2:hover+p {
  display: block;
}

.wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
}

<div class="wrapper">
  <h2>Hello there</h2>
  <p>icon
    <p>
</div>