将宽度调整为父级宽度，并在更高时截断

Question

我有一个有信息的面板，上面有显示的附加信息，但我希望它是微妙的和一个单行，所以当它包含的文本宽于父的宽度时，它应该是截断。

See jsfiddle;这是我所追求的模仿。

这是额外信息的HTML：

<div class="main-container">
  <div class="extra-information">
    <span>Information</span> –
    <span>When this is too long it should be truncated</span>
  </div>
  <div class="main">Main panel</div>
</div>

这是我到目前为止尝试的CSS：

.main-container {
  width: 350px;
  // ...
}

.main {
  // ...
}

.extra-information {
  display: block;
  box-sizing: border-box;
  width: inherit;
  max-width: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

在另一个jsfiddle中查看。

Answer 1

您可以在CSS中使用text-overflow: ellipsis overflow: hidden

文本溢出

text-overflow属性指定应如何向用户发送未显示的溢出内容。

此属性的其他可能值包括：

• 剪辑：默认值。剪辑文字
• 省略号：渲染省略号（“...”）以表示剪切的文字
• 字符串：呈现给定字符串以表示剪切文本

溢出

overflow属性指定内容溢出元素框时会发生什么。

此属性指定当元素的内容太大而无法放入指定区域时剪辑内容或添加滚动条。

注意

溢出属性仅适用于块级元素。

.main-container {
  width: 350px;
}

.extra-information {
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

<div class="main-container">
  <div class="extra-information">
    <span>Information</span> –
    <span>When this is too long it should be truncated</span>
  </div>
  <div class="main">Main panel</div>
</div>

Answer 2

这样的东西？：

＆＃13;

＆＃13;

.main-container {
  font-family: Calibri, serf;
  width: 350px;
  padding: 10px;
  border: 1px solid #ccc;
}
.main {
  border-top: 2px solid #ccc;
  margin-top: 10px;
  padding-top: 10px;
}
.extra-information {
  display: block;
  box-sizing: border-box;
  width: inherit;
  max-width: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

＆＃13;

<div class="main-container">
  <div class="extra-information">
    <span>Information</span> –
    <span>When this is too long it should be truncated</span>
  </div>
  <div class="main">Main panel</div>
</div>

＆＃13;

＆＃13;

＆＃13;

刚刚添加了overflow: hidden;。