自动换行/打破并保持上线的缩进

Question

我有错误的断字/自动换行的问题（差异是什么？同义词？）。我希望像我在屏幕截图中标记它一样。如果由于窗口/屏幕较小而导致换行，则该单词应该断开到下一行，但保持上行缩进。有什么想法吗？

我的HTML结构如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将position:absolute添加到您的i代码中，并将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/

Answer 2

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 3

将<a>项定位为relative，然后将<span> s position设置为absolute，并设置left值span s与铅笔图像宽度的对比

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 4

1. 你可以拍照到标记为li

   li {   list-style-image：url（images / pic.png）; }

2. 你可以给出跨度显示：block;并使用自动换行：

   I， 跨度 {   display：inline-block; } 一个 {   白色空间：nowrap; } 跨度 {   白色空间：正常; }