Возможно ли усечь один конкретный внутренний span из label, который содержит несколько span элементов, так что всего label делает не переполнить в следующую строку?
Я подготовил JSFiddle для него на https://jsfiddle.net/keltik/k18892xe/3/,, но для полноты я также предоставлю часть 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 , если это возможно.
Буду признателен за вашу помощь.