span的一个特定内部label，其中包含多个 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 的方法，如果可能的话。
感谢您的帮助。
答案 0 :(得分：3)
您可以尝试使用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>