Как записать текст в HTML?

Ответ 1

Попробуйте следующее:

div {
    width: 200px;
    word-wrap: break-word;
}

Ответ 2

Вы можете использовать мягкий дефис, например:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Это будет отображаться как

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

если поле ввода недостаточно велико или как

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

если он есть.

Ответ 3

В bootstrap 3 убедитесь, что пустое пространство не установлено как 'nowrap'.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Ответ 4

   div {
    // set a width
    word-wrap: break-word
}

Решение "word-wrap" работает только в IE и браузерах, поддерживающих CSS3.

Лучшим решением для кросс-браузера является использование вашего языка на стороне сервера (php или что-то еще) для поиска длинных строк и регулярного размещения внутри них html-объекта ​ Этот объект прекрасно разбирает длинные слова и работает во всех браузерах.

например.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Ответ 5

Единственный, который работает в IE, Firefox, chrome, safari и opera, если в слове нет пробелов (например, длинный URL-адрес):

div{
    width: 200px;  
    word-break: break-all;
}

Я нашел это пуленепробиваемым.

Ответ 6

Другой вариант также использует:

div
{
   white-space: pre-line;
}

Это установит все ваши элементы div во всех браузерах, поддерживающих CSS1 (что почти во всех распространенных браузерах еще в IE 8)

Ответ 7

Это сработало для меня

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Ответ 8

Добавьте этот 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" 

Ответ 9

Перекрестный браузер

.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+ */
}

Ответ 10

Попробуйте это

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;
}

Ответ 11

Пример из 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;
}

Дополнительные примеры здесь.

Ответ 12

В теге 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 a small tip.
            </div>
        </td>
    </tr>
</table>

В теге CSS попробуйте:

background-size: auto;

table-layout: fixed;

Ответ 13

Используйте атрибут word-wrap:break-word вместе с требуемой шириной. В основном, положить ширина в пикселях, а не в процентах.

width: 200px;
word-wrap: break-word;

Ответ 14

Для меня работает серверное решение: $message = wordwrap($message, 50, "<br>", true); где $message - строковая переменная, содержащая слово/символы, которые нужно разбить. 50 - максимальная длина любого заданного сегмента, а "<br>" - текст, который вы хотите вставить каждый (50) символов.