Làm thế nào để từ văn bản bọc trong HTML?

Làm thế nào có thể văn bản như thế aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavượt quá chiều rộng của một div(nói 200px) được bọc?

Tôi mở cho bất kỳ loại giải pháp nào như CSS, jQuery, v.v.

Thử cái này:

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

Trên bootstrap 3, đảm bảo khoảng trắng không được đặt là 'nowrap'.

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

Bạn có thể sử dụng dấu gạch nối mềm như vậy:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Điều này sẽ xuất hiện dưới dạng

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

nếu hộp chứa không đủ lớn, hoặc như

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

nếu nó là.

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

Các ' word-wrap' giải pháp duy nhất làm việc trong IE và các trình duyệt hỗ trợ CSS3.

Giải pháp trình duyệt chéo tốt nhất là sử dụng ngôn ngữ phía máy chủ của bạn (php hoặc bất cứ thứ gì) để định vị các chuỗi dài và đặt bên trong chúng theo các khoảng thời gian đều đặn thực thể html ​ này phá vỡ các từ dài độc đáo và hoạt động trên tất cả các trình duyệt.

ví dụ

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Công cụ duy nhất hoạt động trên IE, Firefox, chrome, safari và opera nếu không có khoảng trắng trong từ (chẳng hạn như một URL dài) là:

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

Tôi thấy điều này là chống đạn.

Điều này làm việc cho tôi

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;

Một tùy chọn khác cũng đang sử dụng:

div
{
   white-space: pre-line;
}

Điều này sẽ đặt tất cả các thành phần div của bạn trong tất cả các trình duyệt hỗ trợ CSS1 (gần như tất cả các trình duyệt phổ biến từ thời IE 8)

Qua trình duyệt

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

Thêm CSS này vào đoạn văn.

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" 

Ví dụ từ Thủ thuật 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;
}

Thêm ví dụ ở đây .

Một giải pháp phía máy chủ phù hợp với tôi là: $message = wordwrap($message, 50, "<br>", true);trong đó $messagemột biến chuỗi chứa từ / ký tự được chia nhỏ. 50 là độ dài tối đa của bất kỳ phân đoạn cụ thể nào và "<br>"là văn bản bạn muốn chèn vào mỗi (50) ký tự.

Thử cái này

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

tràn văn bản thuộc tính: dấu chấm lửng thêm ... và kẹp dòng hiển thị số lượng dòng.

Trong phần thân HTML, hãy thử:

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

Trong phần thân CSS hãy thử:

background-size: auto;

table-layout: fixed;

Thử cái này

div {display: inline;}

Tôi đã sử dụng bootstrap. Mã html của tôi trông giống như ..

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

bạn có thể sử dụng CSS này

p {
  width: min-content;
  min-width: 100%;
}

thử:

overflow-wrap: break-word;

Sử dụng word-wrap:break-wordthuộc tính cùng với chiều rộng yêu cầu. Chủ yếu, đặt chiều rộng tính bằng pixel, không tính theo tỷ lệ phần trăm.

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