截断列表元素中的长文本

Question

我正在使用带有面包屑导航功能的响应式网站。

当面包屑导航太长而无法在一行中显示时，应该使用一些删除来截断。

到目前为止，我发现的与此相关的所有解决方案似乎都依赖于多行文本或仅在包含元素的时间过长时截断文本。

基本上我的代码如下所示：

main {
  
  max-width: 600px;
  background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}

nav.breadcrumb {
  
  width: 100%;
  padding: 0 2em;
}

ul {
  
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

li {
  
  display: inline-block;
}

li + li {
  
  margin-right: 1em;
}

<main>
  <nav class="breadcrumb">
    <ul>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor sit amet</a></li>
      <li><a href="#">Consectetur adipiscing elit</a></li>
      <li><a href="#">Praesent</a></li>
      <li><a href="#">Duis ullamcorper faucibus</a></li>
      <li><a href="#">Nunc lacus elit, luctus eu molestie id</a></li>
    </ul>  
  </nav>
</main>

是否有任何CSS解决方案才能使其正常工作？

由于我实际上想要实现的目标似乎有些混乱，这里有一个例子：

很抱歉，如果我的问题遗漏了一些问题。

以下是代码笔：http://codepen.io/anon/pen/pvwEZJ

Answer 1

是的，使用text-overflow属性可以使用一些选项来实现此效果。

以下是我如何使用它的一些例子，也许它会派上用场：

<强> 1。 Flexbox的

• 将<ul>代码设置为display: flex
• 孩子<li>要弯曲：1 100％，所以它们在ul上均匀拉伸，也需要溢出隐藏和文本溢出：省略号;
• 进行。

<强> 2。表格技巧

• 将<ul>设置为display: table
• 要显示的儿童<li>：table-cell＆amp;在这里使用最大宽度，这样它们就会停在某个地方，并且......＆＃39;会出现;还需要溢出隐藏和文本溢出：省略号;
• 进行。

第3。固定宽度+浮动，显示内联块/块...

• 将<li>设置为float，或显示内联块，并在em上使用固定宽度，因此它们会在某个时刻停止，而不会进入下一行;还需要溢出隐藏和文本溢出：省略号;
• 进行。

查看 demos here 或下面的代码段，希望这有助于您

＆＃13;

＆＃13;

/*new stuff*/

*,
*:after,
*:before {
  box-sizing: border-box;
}
/*flex*/

.flex {
  display: flex;
  padding: 0;
}
.flex > li {
  margin: 0;
  flex: 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*table way*/

.table {
  display: table;
  padding: 0;
}
.table > li {
  overflow: hidden;
  display: table-cell;
  max-width: 40px;
  text-overflow: ellipsis;
}
/*the fixed way*/

.fixed {
  padding: 0;
}
.fixed li {
  float: left;
  overflow: hidden;
  max-width: 14%;
  /*7items divided by 100*/
  text-overflow: ellipsis;
}
main {
  max-width: 600px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
nav.breadcrumb {
  width: 100%;
  padding: 0 2em;
}
ul {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
li {
  display: inline-block;
}
li + li {
  margin-right: 1em;
}

＆＃13;

<h1>The flex way</h1>
<main>
  <nav class="breadcrumb">
    <ul class='flex'>
      <li><a href="#">Lorem</a>
      </li>
      <li><a href="#">Ipsum</a>
      </li>
      <li><a href="#">Dolor sit amet</a>
      </li>
      <li><a href="#">Consectetur adipiscing elit</a>
      </li>
      <li><a href="#">Praesent</a>
      </li>
      <li><a href="#">Duis ullamcorper faucibus</a>
      </li>
      <li><a href="#">Nunc lacus elit, luctus eu molestie id</a>
      </li>
    </ul>
  </nav>
</main>

<h1>The table way</h1>
<main>
  <nav class="breadcrumb">
    <ul class='table'>
      <li><a href="#">Lorem</a>
      </li>
      <li><a href="#">Ipsum</a>
      </li>
      <li><a href="#">Dolor sit amet</a>
      </li>
      <li><a href="#">Consectetur adipiscing elit</a>
      </li>
      <li><a href="#">Praesent</a>
      </li>
      <li><a href="#">Duis ullamcorper faucibus</a>
      </li>
      <li><a href="#">Nunc lacus elit, luctus eu molestie id</a>
      </li>
    </ul>
  </nav>
</main>

<h1>The fixed way</h1>
<main>
  <nav class="breadcrumb">
    <ul class='fixed'>
      <li><a href="#">Lorem</a>
      </li>
      <li><a href="#">Ipsum</a>
      </li>
      <li><a href="#">Dolor sit amet</a>
      </li>
      <li><a href="#">Consectetur adipiscing elit</a>
      </li>
      <li><a href="#">Praesent</a>
      </li>
      <li><a href="#">Duis ullamcorper faucibus</a>
      </li>
      <li><a href="#">Nunc lacus elit, luctus eu molestie id</a>
      </li>
    </ul>
  </nav>
</main>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在寻找text-overflow:ellipsis;检查此链接：

http://quirksmode.org/css/user-interface/textoverflow.html