Я открыт для любых решений, таких как CSS, jQuery и т.д.
Попробуйте это:
div {
width: 200px;
word-wrap: break-word;
}
Вы можете использовать мягкий дефис, например, так:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
.
Это будет выглядеть как
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
если содержащее поле недостаточно велико, или как
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
если оно достаточно.
div {
// set a width
word-wrap: break-word
}
Решение 'word-wrap
' работает только в IE и браузерах, поддерживающих CSS3
.
Лучшим кросс-браузерным решением является использование языка на стороне сервера (php или любого другого) для поиска длинных строк и размещения внутри них через регулярные интервалы html-сущности
.
Эта сущность отлично разбивает длинные слова и работает во всех браузерах.
Например.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Только один, который работает через т. е., Firefox, хром, Safari и Opera, если нет места в слове (например, длинный URL-адрес) является:
div{
width: 200px;
word-break: break-all;
}
Я нашел это, чтобы быть пуленепробиваемым.
Другой вариант тоже с помощью:
div
{
white-space: pre-line;
}
Это позволит установить все элементы div во всех браузерах, которые поддерживают КНБ1 (то есть практически всех распространенных браузерах, а еще в IE 8)
.wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Добавьте этот CSS к пункту.
style="width:420px;
min-height:15px;
height:auto!important;
color:#666; padding: 1%;
font-size: 14px;
font-weight: normal;
word-wrap: break-word;
text-align: left"
В HTML тело попробовать:
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 800px">
Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
</div>
</td>
</tr>
</table>
В CSS тело попробовать:
background-size: auto;
table-layout: fixed;
Пример из <а href="http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/">в CSS трюки</а>:
div {
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
в
Больше примеров <а href="https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/">here.
На стороне сервера решение, которое работает для меня: $сообщение = свойство wordwrap($сообщения, 50, и" <БР> наша", Истина);
где $сообщение
это строковая переменная содержащих слово/chars, чтобы быть разбиты. 50-это максимальная длина любого данного отрезка, и в "<БР>"
в это текст вы хотите вставить все (50) символов.
Попробуйте это
в
div{
display: block;
display: -webkit-box;
height: 20px;
margin: 3px auto;
font-size: 14px;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
в
текст-перелива свойства: многоточие добавить ... и линии-хомут показывают количество линий.
Я использовал Bootstrap. Мой HTML-код выглядит как ..
<div class="container mt-3" style="width: 100%;">
<div class="row">
<div class="col-sm-12 wrap-text">
<h6>
text content
</h6>
</div>
</div>
</div>
УСБ
.wrap-text {
text-align:justify;
}
Попробуйте это
div {display: inline;}