Question

我正在尝试对链接进行换行而没有成功

如何解决此问题？我已经尝试过断字了

我得到这个结果：

foo bar *
some long sentence *
another one * third

代替此

foo bar * some long 
sentence * another 
one * third

ul {
  width: 150px;
  list-style: none;
}

li {
  display: inline-block;
}

li::after {
  content: '\2022';
  margin-left: 5px;
  word-wrap: break-all;
}

<ul>
  <li><a href="#">foo bar</a></li>
  <li><a href="#">some long sentence</a></li>
  <li><a href="#">another one</a></li>
  <li><a href="#">third</a></li>
</ul>

Answer 1

display: inline-block就是这样做的：内联显示块元素，但是将元素本身像块一样对待。将其更改为display: inline会像普通的嵌入式文本一样显示文本。

然后，您甚至不需要word-wrap。

ul {
  border: 1px solid red;
  width: 150px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

li::after {
  content: '\2022';
  margin-left: 5px;
}

<ul>
<li><a href="#">foo bar</a></li>
<li><a href="#">some long sentence</a></li>
<li><a href="#">another one</a></li>
<li><a href="#">third</a></li>
</ul>

Answer 2

只需将li的显示属性从inline-block更改为inline

看一下代码片段

ul {
  border: 1px solid red;
  width: 150px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

li::after {
  content: '\2022';
  margin-left: 5px;
  word-break: break-all;
}

<ul>
<li><a href="#">foo bar</a></li>
<li><a href="#">some long sentence some long sentence some long sentence some long sentence </a></li>
<li><a href="#">another one</a></li>
<li><a href="#">third</a></li>
</ul>

如何换行列表中的链接

2 个答案: