ワードラップ/ブレークとアッパーラインのインデントを維持する

Question

私は間違った単語分割/ワードラッピングに問題があります（違いは何ですか？同義語？）。私はスクリーンショットでそれをマークしたようなものが欲しい。小さいウィンドウ/スクリーンのために改行がある場合、単語は次の行に分割されますが、上の行はインデントされたままにしてください。何か案は？

私のHTML構造は以下の通りです：

//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

ポジションrelative、その後、absoluteに<span> s'をpositionのを設定して、鉛筆の画像

の幅にspan秒のleft値を設定するなど、あなたの<a>のアイテム

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は、Li

   リー{ リストスタイル画像のためのマーカーにpicにすることができる：URL（画像/ pic.png）。 }

2. Uはスパン表示に与えることができます：ブロック;単語の折り返しで再生します。

   i、 span { display：inline-block; } { white-space：nowrap; } スパン{ 空白：正常; }

Answer 4

あなたiタグにposition:absoluteを追加し、タグにposition:relativeを与え、iタグトップと左の位置を設定します。

<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 
} 

ここではjsfiddleリンクです：https://jsfiddle.net/x82dxx1L/1/