Wie alle LI innerhalb ul Breite enthalten, ohne

Question

Einwickeln ich eine Brotkrümel Struktur erstellen möchten, die wie folgt lautet:

nav1> nav2> nav3 usw.

So ist es ein ul in div enthalten sind, mit mit jedes nav1, nav2 und nav3 als li. Genau wie unten:

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

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

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

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

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

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

Ich brauche die Verpackung und zeigen Ellipsen nur im letzten Brotkrumen-Artikel zu verhindern. Jede Hilfe wäre willkommen.

Answer 1

Ich denke, das sollte Ihr Problem lösen. Ich habe den Flexbox-Ansatz CBroe vorgeschlagen. Ich habe eine maximale Breite auf das Tag gesetzt, so dass Sie es an Ihre Bedürfnisse anpassen sollten, wenn Sie Ihre endgültige Lösung implementieren. Hier ist der Link zu einem Beispiel pen zur Lösung Ihres Problems. Viel Glück!

* { 
 
    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>