Question

我希望链接显示在与div中的文本相同的行中。现在它出现在下一行。

目前的情况是

Some text
http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html

预期结果是：

Some text http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html

HTML代码：

<div>
  <ol>
    <li>
      Some text <a href="#">http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html</a>
    </li>
  </ol>
</div>

CSS代码：

a {
    word-wrap: break-word;
    display: inline;
}

更新：

通过添加和删除连字符，它会产生不同的结果。要重现此问题，请在jsfiddle中将浏览器窗口调整为小于1000px。   https://jsfiddle.net/6xnqnwmw/

Answer 1

文本链接可能会溢出li元素（最大）宽度。

您可以设置overflow: visible或增加li元素的宽度，以使链接适合css中的同一行。

修改

溢出的问题。我通过制作李来解决它   宽度很宽。（一点点黑客但可能适合你）。

https://jsfiddle.net/mb9aLaLa/1/

编辑2：您可以使用自动换行：break-all   https://jsfiddle.net/mb9aLaLa/3/

链接不与文本出现在同一行

1 个答案: