css - 如何在不包裹的情况下将所有 LI 包含在 ul 宽度内

Question

我想创建一个像这样的面包屑结构:

nav1 > nav2 > nav3 等

所以它是一个包含在 div 中的 ul，每个 nav1、nav2 和 nav3 都作为 li。就像下面这样:

ul.nice-menu, ul.nice-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid #ccc;
	/*position: relative;*/
  white-space: nowrap;
  overflow:hidden;
}

#zone-menu ul > li {
	/*width: 20%;*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
	padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

ul.nice-menu li {
	margin: 0;
	padding-left: 0;
	background-image: none;
}

ul.nice-menu-down li {
	border-top: 1px solid #ccc;
}

ul.nice-menu li {
	border: 1px solid #ccc;
	border-top: 0;
	float: left;
	background-color: #eee;
	/*position: relative;*/
}

<div id="zone-menu">
	<ul class="nice-menu">
		<li><a href="/">Another Test</a></li>
		<li><a href="/">Test</a></li>
		<li><a href="/">Another Test2</a></li>
		<li><a href="/">Menu Item 2</a></li>
		<li><a href="/">Test3 is a very long menu item. It should not be wrapped. Instead should truncate with ellipses</a></li>
	</ul>
</div>

我需要防止换行并仅在最后一个面包屑项中显示省略号。任何帮助将不胜感激。

Answer 1

我认为这应该可以解决您的问题。我采用了 flexbox 方法 CBroe建议。我确实在标签上设置了最大宽度，因此您应该在实现最终解决方案时调整它以满足您的需要。这是示例的链接 pen解决你的问题。祝你好运!

* {
  box-sizing: border-box;
  font-family: helvetica, sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #36c0e8;
}

a:hover {
  color: #2ea3c5;
}

ul.nice-menu {
  list-style: none;
  padding:0;
  margin:0;
  display: flex;
}

ul.nice-menu li {
  padding:0;
  margin:0;
}

ul.nice-menu li a {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
  overflow-x: hidden;
  padding:20px 25px 20px 15px;
  position: relative;
}

ul.nice-menu li a::after {
  content: " ";
  position: absolute;
  top:40%;
  right: 2px;
  width: 10px; 
  height: 10px;
  transform: translateY(-50%);
  transform: rotate(-45deg);
  background-color: transparent;
  border-bottom: solid gray 2px;
  border-right: solid gray 2px;  
}

ul.nice-menu li:last-child a::after {
  content: none; 
}

<ul class="nice-menu">
      <li><a href="/">Another Test</a></li>
      <li><a href="/">Test</a></li>
      <li><a href="/">Another Test2</a></li>
      <li><a href="/">Menu Item 2</a></li>
      <li><a href="/">Test3 is a very long menu item. It should not be wrapped. Instead should truncate with ellipses</a></li>
    </ul>