标签元素多个内部跨度文本截断答案

【问题标题】：label element multiple inner span text truncation标签元素多个内部跨度文本截断
【发布时间】：2018-11-27 17:30:21
【问题描述】：

是否可以截断一个特定的 `label` 的内部`span`，其中包含多个 `span` 元素，以便总共有`label` 不会溢出到下一行吗？

我已经在https://jsfiddle.net/keltik/k18892xe/3/ 上为它准备了一个 JSFiddle，但为了完整起见，我还将在此处提供部分 HTML/CSS：

<html>
  <body>
    <div class="container">
      <!-- First Spectre Accordion -->
      <div class="container">
        <div class="accordion">
          <input id="accordion-1" name="accordion-radio" type="checkbox" hidden="">
          <label class="accordion-header c-hand" for="accordion-1">
              <i class="fas fa-angle-down"></i>
              <span class="headline">some headline that needs to be truncated1, so that everything in the parent 'label' element remains in one line</span>
              <span class="spacer"></span>
              <span class="date">dont truncate me1</span>
          </label>
          <div class="accordion-body">
            <ul class="menu menu-nav">
              <li class="menu-item">Element 1</li>
              <li class="menu-item">Element 2</li>
              <li class="menu-item">Element 3</li>
            </ul>
          </div>
        </div>
  <!-- more accordions, same structure -->
  </body>
</html>

CSS 文件 是这样的，但在我的开发机器上我使用的是 Scss：

.container {
  max-width: 400px;
}

我正在使用spectre.css framework，它已包含在上述 JSFiddle 链接中。

我已经尝试过这些方法，但无法让它们中的任何一个使用label、多个span 元素和特定的spectre.css 类：

如果可能的话，我正在寻找使用 HTML/CSS 而不使用 Javascript 的方法。

感谢您的帮助。

【问题讨论】：

所以要明确一点：一行有很多跨度并且只截断其中一些？

标签： html css sass spectre.css

【解决方案1】：

你可以像这样尝试使用white-space:nowrap和flexbox：

label {
  display: flex;
  max-width: 400px;
  border: 1px solid;
  overflow: hidden;
}

label > span {
  white-space: nowrap;
  flex-shrink: 0; /*This span will never shrink*/
  margin: 0 5px;
}

span.tru {
  flex-shrink: 1;/*allow this one to shrink*/
  /*Hide the overflow*/
  overflow: hidden;
  text-overflow: ellipsis;
}

<label>
<span>lorem don't truncate</span>
<span class="tru"> truncate me truncate me truncate me truncate me truncate me v truncate me truncate me truncate me</span>
<span>don't truncate me</span>
</label>

【讨论】：

有了这个每个span 需要一个单独的线......不是我想要的。您能否尝试看看我的 JSFiddle 并在其中尝试一下，因为还涉及其他 css 类？我正在使用FireFox。
@kiltek 真的吗？您使用的是哪个浏览器.. 我希望不是 IE .. 这是用 Chrome 和 FF 测试的
@kiltek 我已经在那里尝试过，我在这里创建了一个简化版本；）但我会发布 jsfiddle 一个
我觉得不行，因为我也用了spectre.css框架提供的accordion。所以如果你只使用我的 JSFiddle 那就太好了。
@kiltek 这里是jsfiddle.net/k18892xe/4，和这里的代码一样；) 只是改变了类

是否可以截断一个特定的 label 的内部span，其中包含多个 span 元素，以便总共有label 不会溢出到下一行吗？

是否可以截断一个特定的 `label` 的内部`span`，其中包含多个 `span` 元素，以便总共有`label` 不会溢出到下一行吗？