0

Есть блок, ширина в нем установлена 300px. Помещаемый в него текст вытягивается в одну строчку и выходит далеко за границы блока. Как перенести текст по словам таким, образом, чтобы он не выходил за правую границу блока? Пробовалось word-wrap, overflow-wrap со значением break-word - не помогло.

<div class="tp-caption emphatic_small_bold sfl randomrotateout" style="width: 150px; word-break: break-all;" data-x="170" data-y="175" data-speed="500" data-start="3500" data-easing="Power4.easeOut">Очень длинный текст здесь</div>

То, что показывают инструменты разработчика:

element.style {
    width: 150px;
    word-break: break-all;
    border-width: 0px;
    transition: all 0s ease 0s;
    min-height: 0px;
    min-width: 0px;
    line-height: 14px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-size: 9px;
    left: 105.652px;
    top: 108.759px;
    visibility: visible;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1);
}
.tp-caption.emphatic_small_bold {
    position: absolute;
    color: #555;
    text-shadow: none;
    font-size: 15px;
    line-height: 22px;
    font-family: "Raleway",sans-serif;
    margin: 0px;
    border-width: 0px;
    border-style: none;
    white-space: nowrap;
}
.tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption {
    position: absolute;
    visibility: hidden;
    -webkit-font-smoothing: antialiased !important;
}
.tp-caption {
    z-index: 1;
    white-space: nowrap;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
7
  • developer.mozilla.org/ru/docs/Web/CSS/word-break
    – user355286
    Commented 30 дек. 2019 в 11:21
  • word-break: break-all тоже не работает Commented 30 дек. 2019 в 12:05
  • Ну тогда нужен код
    – user355286
    Commented 30 дек. 2019 в 12:21
  • Добавил код.. Можно также посмотреть по адресу городнаш.рф , длинный текст размещается в баннере, под заголовком. Commented 30 дек. 2019 в 12:27
  • 1
    или добавить нашему элементу white-space: normal;
    – user355286
    Commented 30 дек. 2019 в 12:35

1 ответ 1

1

Нужно удалить white-space: nowrap; из CSS, это параметр который заставляет писать текст в одну строчку. Вот пример, в котором я закомментировал этот параметр.

div {
    width: 300px;
    word-break: break-all;
    border-width: 0px;
    transition: all 0s ease 0s;
    min-height: 0px;
    min-width: 0px;
    line-height: 14px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-size: 9px;
    left: 0px;
    top: 0px;
    visibility: visible;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1);
}
.tp-caption.emphatic_small_bold {
    position: absolute;
    color: #555;
    text-shadow: none;
    font-size: 15px;
    line-height: 22px;
    font-family: "Raleway",sans-serif;
    margin: 0px;
    border-width: 0px;
    border-style: none;
    /*white-space: nowrap; !!!УДАЛИТЬ (я закомментировал)*/
}
.tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption {
    position: absolute;
    visibility: hidden;
    -webkit-font-smoothing: antialiased !important;
}
.tp-caption {
    z-index: 1;
    /*white-space: nowrap; !!!УДАЛИТЬ (я закомментировал)*/
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
<div class="tp-caption emphatic_small_bold sfl randomrotateout" style="width: 150px; word-break: break-all;" data-x="170" data-y="175" data-speed="500" data-start="3500" data-easing="Power4.easeOut">Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь Очень длинный текст здесь</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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