css HTML锚标记中超链接文本的内联换行

clj7thdc  于 2022-11-26  发布在  其他
关注(0)|答案(6)|浏览(173)

我试图找到一种方法,允许HTML链接中的很长文本换行,同时将链接包含在一个紧凑的矩形中。
本质上,我想要的是:

**with a really, really**
    Here is some text **long link that wraps**   and here is some more text.
                      **around in a rectangle**

代替:

Here is some text **with a really, really long link that wraps**
   **around in a rectangle** and here is some more text.

我该怎么做?

dfuffjeb

dfuffjeb1#

你可以在Firefox中这样做--但在IE中不起作用:(

<p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text.

<style type="text/css">

a {display: inline-block; max-width: 100px; vertical-align: middle;}

</style>
i34xakig

i34xakig2#

我知道这是相当老的,但它仍然是第一个搜索结果之一,出现在我的主题。我发现使用:

white-space: pre-wrap;

我强迫锚在我的宽度限制周围环绕文本

dl5txlt9

dl5txlt93#

你可以在你的链接上使用display:inline-block; css属性,这将给予你你想要的效果(不要忘记设置宽度:)。
显示:IE不支持inline-block,但幸运的是,有人已经完成了这项艰苦的工作,并提出了一个变通办法here

tzdcorbm

tzdcorbm4#

我最终遇到了这个问题,因为我使用的是bootstrap,它默认设置这是它的风格之一

.dropdown-menu > li > a{
    white-space: nowrap;
}

这使得“断字”和“宽度”css属性无法实际解决问题。
因此,我首先必须将空白属性设置为“pre-wrap

2w3rbyxf

2w3rbyxf5#

<p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text.

<style type="text/css">

a {display: inline-block; max-width: 100px; vertical-align: middle;}

</style>
qnyhuwrf

qnyhuwrf6#

方法有很多:

display : inline-block;
display : inline;
white-space: pre-wrap;
white-spa s: nowrap;

相关问题