如何在不影响其他元素的情况下增加中间元素文本字符

Question

在列表项中有一个链接和跨度属性如下，

<li>
<span class="a">Icon 1</span>
<a href=" class="b">Title length Should be 180 charcters</a>
<span class="c">Icon 2</span>
</li>

在屏幕截图下方找到，

Answer 1

使用flex

li {
  display: flex;
}

<ul>
  <li>
    <span class="a">Icon 1</span>
    <a href="" class="b">Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters </a>
    <span class="c">Icon 2</span>
  </li>
</ul>

或display: table / vertical-align: top

li {
  display: table;
}
li * {
  display: table-cell;
  vertical-align: top;
}

<ul>
  <li>
    <span class="a">Icon 1</span>
    <a href="" class="b">Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters </a>
    <span class="c">Icon 2</span>
  </li>
</ul>

或display: inline-block / vertical-align: top

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
li * {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  width: 10%;
}
li a {
  width: 80%;
}

<ul>
  <li>
    <span class="a">Icon 1</span>
    <a href="" class="b">Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters Title length Should be 180 charcters</a>
    <span class="c">Icon 2</span>
  </li>
</ul>