0

При переносе слов в ссылке, ее блок превышает необходимую длину справа.
Как можно убрать этот отступ так, чтобы ширина сама варьировалась в зависимости от длины слов?

Сейчас получается так, что эта ссылка с названием осуществляет перенос на новую строку, при этом заполняя полностью всю ширину, а так как фиксированной ширины нет, она заполняет сколько может.

введите сюда описание изображения

.vacancy-item-title {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
    word-wrap: break-word;
}
<a href="#" class="vacancy-item-title">Врач-косметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог</a>

3
  • Мне важно поведение именно при переносе строки! inline, flex и всевозможные комбинации в этом русле работают одинаково, оставляя справа огромное место при переносе
    – mimik
    22 ноя 2019 в 8:29
  • Вообще, я читала об этом вчера весь вечер и так понимаю, что браузер не воспринимает текст-ссылку, как блок внутри которого много элементов. И типо для него это как одна буква, а то, что я прописала в ней перенос - касается только длины блока, а ширина остается прежней. (немного примитивно объяснила, может и не права на самом деле)
    – mimik
    22 ноя 2019 в 8:43
  • может будет понятнее, зачем мне это. Я хочу справа от этого блока разместить еще один блок, но там появляется огромный отступ при переносе и выглядит неправильно. Когда название помещается в одну строку, рядом блок выглядит хорошо, но при переносе ссылка растягивается на максимальную ширину
    – mimik
    22 ноя 2019 в 8:52

2 ответа 2

2

Ваша задача решается, через word-break:break-all;.

.vacancy-item-title {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
    word-break:break-all;
}
<a href="#" class="vacancy-item-title">Врач-косметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог/Дермотокосметолог</a>

Если я конечно же, правильно понял вашу задачу.

1

.vacancy-item-title {
    display: inline-block;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
    word-wrap: break-word;
}
<a href="#" class='vacancy-item-title'>Врач-косметолог/Дерматокосметолог</a>

2
  • inline тут тоже не работает. Попробуйте добавить к этому названию еще одно длинее по ширине и увидите, что слово перенесется, а ссылка займет всю строку, а не только ту область, где слова
    – mimik
    22 ноя 2019 в 8:20
  • Мне важно, чтобы при переносе строки, она обрезала ту область, что пустая. Я, честно говоря, уже все испробовала, не уверена, что это возможно, но может кто сталкивался
    – mimik
    22 ноя 2019 в 8:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.