CSS word-wrap: break-word не переносит тег, если вы не оберните его в div и не добавите там правило

почему CSS правит

a {
  word-wrap: break-word;
}

с участием

<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

не обертывание и не заставляет окно показывать полосу прокрутки, тогда как

div {
  word-wrap: break-word;
}

будет ли обертывание в его якорном дочернем тексте нормально?

ОБНОВЛЕНИЕ: только что заметили (см. поле URL-адреса экземпляра L3ST по адресу form при изменении размера окна), что мне нужен word-break: break-all вместо word-wrap: break-word, кроме предлагаемого display: inline-block , поэтому теперь используем:

a
{
  word-break: break-all !important; /* make sure containers don't override */
  display: inline-block !important;
}

который отлично работает


text html css word-wrap anchor
person George Birbilis    schedule 30.10.2016    source источник
comment
Я предполагаю, что у вас есть фиксированная ширина для вашего div?   -  person andreas    schedule 30.10.2016
comment
какой-то верхний родительский div для него составляет 100%   -  person George Birbilis    schedule 30.10.2016
comment
Кажется, проблема заключается в стиле отображения якорей (см. ответ ниже), однако задайтесь вопросом, является ли этот выбор дизайна интуитивно понятным.   -  person George Birbilis    schedule 30.10.2016

Ответы (1)


arrow_upward
4
arrow_downward

CSS word-wrap: break-word; работает только в элементах display:block; или display:inline-block;, поэтому вы можете просто использовать:

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


a {
  width:100px;
  word-wrap: break-word;
  display:inline-block;
}
<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

P.S. div являются display:block; по умолчанию пользовательским агентом.

person paolobasso    schedule 30.10.2016
comment
спасибо, есть какое-то конкретное обоснование этого выбора дизайна? - person George Birbilis; 30.10.2016
comment
Я считаю, что перенос слов был сделан для элементов уровня блока, а не для встроенных элементов. Невозможно переполнить встроенный элемент. Вот почему существует перенос слов для предотвращения переполнения содержимым элемента уровня блока. Я думаю, что использовать его в DIV, вероятно, более правильно. - person orangeh0g; 30.10.2016
comment
Вероятно, потому что вы можете установить ширину для блочных элементов. Естественно, что встроенные элементы (например, a) не имеют фиксируемой ширины и будут расширяться, чтобы содержать свое содержимое. - person Dave Cripps; 30.10.2016
comment
@Dave Cripps - действительно, спасибо за ваш комментарий - этот вопрос, в котором нужно установить ширину привязки, связан с stackoverflow.com/questions/4743254/ - person George Birbilis; 30.10.2016
comment
Кстати, в этом другом вопросе есть несколько интересных комментариев, например, размещение таких якорей внутри списка UL нарушит некоторые правила (в Chrome), и им придется установить их встроенными или, я думаю, использовать! important. У них также есть указатель на спецификацию в другом комментарии w3.org/ TR / CSS2 / visuren.html # display-prop - person George Birbilis; 30.10.2016
comment
@ Джордж Бирбилис - Добро пожаловать. :) Да, действительно, и в некоторых ответах на этот вопрос он есть - вам нужно изменить встроенный элемент, чтобы он отображался как элемент уровня блока, чтобы установить размер. - person Dave Cripps; 30.10.2016
comment
на всякий случай тот комментарий о том, что UL переопределяет правила в Chrome, я использовал! important. Также я обнаружил, что word-wrap: break-word не работает, и вместо этого использовал word-break: break-all. Можно увидеть, как он работает в форме, которую я упоминаю в разделе обновлений в конце исходного вопроса - person George Birbilis; 30.10.2016