Как обернуть текст в HTML?

Question

Как можно обернуть текст, такой как aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, который превышает ширину div (скажем, 200px)?

Я открыт для любого решения, такого как CSS, jQuery и т. Д.

Answer 1

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

div {display: inline;}

Answer 2

В теле 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;

Answer 3

Пример из CSS Tricks :

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

Больше примеров здесь .

Answer 4

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

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

свойство text-overflow: ellipsis add ... и line-зажим показывают количество строк.

Answer 5

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

Answer 6

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

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