Question

我需要实现一些要求：动态绘制li个元素列表，这些元素可以包含不同长度的文本。要在一行中显示的所有元素都需要替换为...。我用以下css实现了这个目标：

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

通常这个面包屑将包含1-5个元素。第一个和最后一个元素应始终显示全文。

如何计算li元素的最大宽度而不包括最后一个元素的宽度？类似的东西：

calc((100% - width-last-element)/<li-el-qty>-1

我尝试了以下内容：

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 1em;
  background-color: rgb(227, 227, 227);
  white-space: nowrap;
  overflow: hidden;
}


/* Regular breadcrumbs */

ul {
  list-style-type: none;
  margin: 0;
  padding: 2em;
  color: #333;
}

li {
  display: inline-block;
  position: relative;
  padding-right: 2em;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8em;
}

li:after {
  content: '>';
  position: absolute;
  display: inline-block;
  right: 0;
  width: 2em;
  text-align: center;
}

li:nth-last-child(1) {
  text-decoration: underline;
  font-weight: bold;
  text-overflow: clip;
  overflow: visible;
}

<ul class="bread">
  <li>MERSEDES</li>
  <!--
  -->
  <li>Main transmission section1</li>
  <!--
  -->
  <li>Second Transmissio Section</li>
  <!--
  -->
  <li>Another to view</li>
  <!--
  -->
  <li>Final link the hierarchy</li>
  <!--
-->
  <li>Current section viewAAAAA</li>
</ul>

https://codepen.io/nolik/pen/mKpWYm

我也尝试根据这样的元素数设置动态宽度：

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    max-width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    max-width: 25%;
}

但两者都没有效果。

Answer 1

我在父元素上使用display: flex，然后在最后一个子元素上取消设置min-width。一个简单的例子：

body {
  margin: 0;
}

.parent {
  display: flex;
}

.parent>div {
  min-width: 0;
}

p {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.parent>div:last-of-type {
  min-width: unset;
}

<div class="parent">
  <div>
    <p>MERSEDES</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
</div>

<div class="parent">
  <div>
    <p>MERSEDES</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
</div>

<div class="parent">
  <div>
    <p>MERSEDES</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
  <div>
    <p>Another to view to view</p>
  </div>
  <div>
    <p>Final link the hierarchy</p>
  </div>
</div>

Answer 2

通过使用flexbox及其grow和shrink属性，可以得到想要的结果。

需要进行以下修改：

将display: flex;添加到ul。这将使其成为flex容器
将flex: 0 1 10%;添加到li。这将告诉li不增长，而以初始长度10%缩小
使用规则li:first-child添加选择器flex: 0 0 auto;。这样可以确保第一个li保持其初始大小，并且不会缩小
使用规则li:last-child添加选择器flex: 1 0 auto;。这样可以确保最后一个li可以填充可用空间

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 1em;
  background-color: rgb(227, 227, 227);
  white-space: nowrap;
  overflow: hidden;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 2em;
  color: #333;
  display: flex;
}

li {
  position: relative;
  padding-right: 2em;
  margin: 0;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 10%;
}

li:after {
  content: '>';
  position: absolute;
  right: 0;
  width: 2em;
  text-align: center;
}

li:nth-last-child(1) {
  text-decoration: underline;
  font-weight: bold;
  text-overflow: clip;
  overflow: visible;
}

li:first-child {
  flex: 0 0 auto;
}

li:last-child {
  flex: 1 0 auto;
}

<ul class="bread">
  <li>MERSEDES</li>
  <li>Main transmission section1</li>
  <li>Second Transmissio Section</li>
  <li>Another to view</li>
  <li>Final link the hierarchy</li>
  <li>Current section viewAAAAA</li>
</ul>

列表元素的动态宽度计算

2 个答案: