Wort wrap/break und behalten obere Linie Einzug

Question

Ich habe Probleme mit falschem Wort-breaking/Wort-Wrapping (was ist der Unterschied? Synonyme?). Ich möchte etwas, wie ich es im Screenshot markiert habe. Sollte es aufgrund eines kleinen Fensters/Bildschirms zu einem Zeilenumbruch kommen, sollte das Wort in die nächste Zeile umgebrochen werden, aber den oberen Zeilenumbruch beibehalten. Irgendwelche Ideen?

Meine HTML-Struktur ist die folgende:

//Sorry, I thought my CSS is not necessary because it's a general //problem with an easy solution. 
 

 
nav ul, nav li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav li { 
 
    display: block; 
 
    /*height:46px;*/ 
 
    line-height: 46px; 
 
    box-sizing: border-box; 
 
    transition: all 0.3s ease; 
 
    border-radius: 3px; 
 
} 
 
nav li:hover { 
 
    background-color: #ddd; 
 
} 
 
nav li .router-link-active { 
 
    background-color: #ddd; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    display: block; 
 
    color: #666; 
 
    font-size: 16px; 
 
    box-sizing: border-box; 
 
    padding-left: 15px; 
 
    font-weight: 300; 
 
    padding-left: 15px; 
 
} 
 
nav ul i.material-icons { 
 
    color: #666; 
 
    font-size: 19px; 
 
    vertical-align: text-top; 
 
    padding-right: 17px; 
 
} 
 

 
nav { 
 
    width: 250px; 
 
}

<nav> 
 
    <ul lass="nav-links"> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neuen Nutzer anlegen</span></a></li> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neuen Verkauf anlegen</span></a></li> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neues Objekt anlegen</span></a></li> 
 
    </ul> 
 
</nav>

Answer 1

CSS:

span{ 
     word-break:normal; 
    } 
    li>a>i{ 
    float: left; 
    } 

HTML:

<ul lass="nav-links"> 
     <li><a><i class="material-icons">create</i> 
       <span>Neuen Nutzer <br> anlegen</span></a></li> 
     <li><a><i class="material-icons">create</i> 
       <span>Neuen Verkauf anlegen</span></a></li> 
     <li><a><i class="material-icons">create</i> 
       <span>Neues Objekt anlegen</span></a></li> 
    </ul> 

https://jsfiddle.net/yz4c36wc/1/

Answer 2

Position Ihre <a> Artikel als relative und dann den <span> s'position s absolute, und stellen Sie den left Wert der span s auf die Breite des Stiftes Bild

nav ul, nav li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav li { 
 
    display: block; 
 
    /*height:46px;*/ 
 
    line-height: 46px; 
 
    box-sizing: border-box; 
 
    transition: all 0.3s ease; 
 
    border-radius: 3px; 
 
} 
 
nav li:hover { 
 
    background-color: #ddd; 
 
} 
 
nav li .router-link-active { 
 
    background-color: #ddd; 
 
} 
 
nav a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    display: block; 
 
    color: #666; 
 
    font-size: 16px; 
 
    box-sizing: border-box; 
 
    padding-left: 15px; 
 
    font-weight: 300; 
 
    padding-left: 15px; 
 
} 
 
nav ul i.material-icons { 
 
    color: #666; 
 
    font-size: 19px; 
 
    vertical-align: text-top; 
 
    padding-right: 17px; 
 
} 
 

 
nav { 
 
    width: 200px; 
 
} 
 

 
nav li span { 
 
    position: absolute; 
 
    left: 60px; 
 
}

<nav> 
 
    <ul lass="nav-links"> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neuen Nutzer anlegen</span></a></li> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neuen Verkauf anlegen</span></a></li> 
 
    <li><a><i class="material-icons">create</i> 
 
     <span>Neues Objekt anlegen</span></a></li> 
 
    </ul> 
 
</nav>

Answer 3

1. U für Li pic kann

   li { list-style-Bild Marker: URL (images/pic.png); }

2. U kann geben, um anzuzeigen: block; und spielen mit Wortumbruch:

   i, span { Anzeige: Inline-Block; } a { Leerzeichen: nowrap; } span { Leerraum: normal; }

Answer 4

hinzufügen position:absolute zu Ihrem i-Tag und geben position:relative an einem Tag und setzen i Tag oben und linke Position.

<ul class="nav-links"> 
    <li><a><i class="fa fa-pencil"></i> 
      <span>Neuen Nutzer anlegen</span></a></li> 
    <li><a><i class="fa fa-pencil"></i> 
      <span>Neuen Verkauf anlegen</span></a></li> 
    <li><a><i class="fa fa-pencil"></i> 
      <span>Neues Objekt anlegen</span></a></li> 
</ul> 

CSS:

.nav-links{ 
    list-style:none; 
    padding:0; 
    margin:0; 
    width:150px; 
} 
.nav-links li { 
    display: block; 
    /*height:46px;*/ 
    line-height: 20px; 
    box-sizing: border-box; 
    transition: all 0.3s ease; 
    border-radius: 3px; 
    margin-bottom:20px; 
} 
.nav-links li:hover { 
    background-color: #ddd; 
} 
.nav-links li .router-link-active { 
    background-color: #ddd; 
} 
.nav-links a { 
    text-decoration: none; 
    display: block; 
    color: #666; 
    font-size: 16px; 
    box-sizing: border-box; 
    font-weight: 300; 
    padding-left: 15px; 
    position:relative; 
    padding-left:30px; 
} 
.nav-links li i { 
    color: #666; 
    font-size: 19px; 
    padding-right: 17px; 
    position:absolute; 
    left:5px; 
    top:5px 
} 

ist hier jsfiddle Link: https://jsfiddle.net/x82dxx1L/1/