Question

我有以下情况：

<li style="width:100px">    <!--display:block-->
    <a href="...">          <!--display:block-->
        <span>Link text Which is longer than 100px</span><!--display:inline-->
    </a>
</li>

目前，长文本正在扩展超出<li>的外部限制，但我希望将其包裹到第二行。

我如何用css实现这个目标？

Answer 1

您可以使用word-break: break-all来实现此目标。

EXAMPLE HERE

span {
    word-break: break-all;
}

Answer 2

添加你的css

ul > li {
  width: 100px;
  word-break: break-all; /*see this property in a colorful box*/
  background: gold;
}

现在是html

<ul>
  <li>
    <a href="javascript:;">
      Link text Which is longer than 100px
    </a>
  </li>
  <li>
    <a href="javascript:;">
      Link text Which is longer than 100px
    </a>
  </li>
</ul>

你会看到神奇的:)。一个提示，使用css比使用html行更多。再见

如何将span包装的内容放到嵌入式<a></a>的下一行

2 个答案: