是否可以截断包含多个
是否可以截断包含多个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 框架，它已经包含在前面提到的 JSFiddle 链接中。
我已经尝试了这些方法，但无法让它们中的任何一个与label、多个span元素和特定的spectre.css类一起工作：
- https://scottwhittaker.net/flexbox/2017/02/05/flexbox-and-text-truncation.html
- https://westerndevs.com/css/Using-Overflow-Ellipsis-in-Inline-Flex/
- 如何将"文本溢出：省略号"与标签元素一起使用？
如果可能的话，我正在寻找使用没有Javascript的HTML/CSS的方法。
我将不胜感激你的帮助。
你可以像这样尝试使用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>