Question

我有一个<h3>内的跨度，一旦文本太长，就会换行到下一行。我需要说明文字全部留在.title和overflow:hidden的第一行。描述应该对齐，标题应该左对齐。

此设计模式在整个应用程序中使用，因此更改html元素本身是最后的选择。如果可能的话，我想用一个简单的CSS解决方案来解决这个问题。我一直在尝试overflow，text-overflow和white-space的所有组合，我能想到没有运气。谢谢！

JSFiddle

.title {
  background-color: lightblue;
  color: green;
}
.description {
  float: right;
  font-weight: bold;
  color: black;
}

Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

Answer 1

您可以将.title设置为white-space:nowrap + display:table。

.title {
  white-space: nowrap;
  display: table;
}

＆＃13;

.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  display: table;
}
.description {
  font-weight: bold;
  color: black;
}

＆＃13;

Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

＆＃13;

修改1：如果您想要隐藏额外的文字，可以使用white-space:nowrap + overflow:hidden。

＆＃13;

.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  overflow: hidden;
}
.description {
  font-weight: bold;
  color: black;
}

＆＃13;

Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

＆＃13;

编辑2 ：如果您需要缩短文字并与长文本匹配而没有隐藏文字，则可以使用white-space:nowrap + display:table-row。注意，需要稍微调整标记 - 将两个容器合并为一个。

＆＃13;

.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  display: table-row;
}
.description {
  font-weight: bold;
  color: black;
}

＆＃13;

<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

＆＃13;

Answer 2

overflow: hidden;仅在div具有设定宽度时才有效。您可以将div上的宽度设置为100vw或设置px金额，然后您可以同时使用white-space: nowrap;和'overflow：hidden;`。

.title {
  background-color: lightblue;
  color: green;
  width: 100vw;
  overflow: hidden;
  white-space: nowrap;
}

.description {
  font-weight: bold;
  color: black;
}

Answer 3

Pangloss让我走上正轨，这是最终为我工作的CSS。

.description {
  text-align: right;
  width:100%;
  overflow:hidden;
  font-weight: bold;
  color:black;
}
.container {

}
.title {
  background-color:lightblue;
  color:green;
  display:flex;
  white-space:nowrap;
}

使用CSS防止浮动span元素的包装

3 个答案: