文章/答案/技术大牛

发布

社区首页 >问答首页 >标签元素多内跨文本截断

问标签元素多内跨文本截断
EN

Stack Overflow用户

提问于 2018-04-27 14:05:20

回答 1查看 400关注 0票数 0

是否有可能截断包含多个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框架，它已经包含在前面提到的JSFiddle链接中。

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

如果可能的话，我正在寻找使用没有Javascript的的方法。

我很感谢你的帮助。

spectre.css

html

css

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-27 14:12:46

您可以尝试像这样使用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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50064129

复制

相似问题

问标签元素多内跨文本截断
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标签元素多内跨文本截断EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标签元素多内跨文本截断
EN