Есть блок, ширина в нем установлена 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;
}
white-space: normal;