Инлайн-перенос текста гиперссылки в HTML-тег

Question

Я пытаюсь найти способ разрешить перенос по-настоящему длинного текста в HTML-ссылке, сохраняя ссылку в компактном прямоугольнике.

По сути, я хочу это:

                      <b>with a really, really</b>
    Here is some text <b>long link that wraps</b>   and here is some more text.
                      <b>around in a rectangle</b>

Вместо:

   Here is some text <b>with a really, really long link that wraps</b>
   <b>around in a rectangle</b> and here is some more text.

Как я могу это сделать?

Answer 1

Вы можете сделать это в 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>

Answer 2

Я знаю, что это довольно старое, но это был один из первых результатов поиска, который мне подошел по этому вопросу. Я обнаружил, что с помощью:

white-space: pre-wrap;

заставил якорь обернуть текст вокруг моих ограничений по ширине

Answer 3

У меня возникла эта проблема, потому что я использовал bootstrap, и он по умолчанию установил это как один из стилей

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

Из-за чего свойства css "разбивка по словам" и "ширина" фактически не решали проблему

Итак, сначала я должен был установить для этого свойства пробела значение "pre-wrap"

Answer 4

Вы можете использовать display:inline-block; css свойство в вашей ссылке, которое даст вам именно тот эффект, который вы хотите (не забудьте установить width:).

display: inline-block не поддерживается в IE, но, к счастью для вас, кто-то уже проделал тяжелую работу и нашел обходной путь здесь .