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

Question

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

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

Answer 1

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

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

Answer 2

На начальной загрузке 3 убедитесь, что пустое пространство не установлено как nowrap.

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

Answer 3

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

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Это будет выглядеть как

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

, если вмещающий ящик недостаточно большой или как

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

если это так.

Answer 4

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

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

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

, например

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 5

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

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;

Answer 6

Единственное, что работает в IE, Firefox, Chrome, Safari и Opera, если в слове нет пробелов (например, длинный URL):

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

Я обнаружил, что это пуленепробиваемый.

Answer 7

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

div
{
   white-space: pre-line;
}

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

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

Answer 9

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

Answer 10

Я использовал бутстрап. Мой 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>

CSS

.wrap-text {
     text-align:justify;
}