Bagaimana cara membungkus teks dalam HTML?

Bagaimana teks seperti aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayang melebihi lebar div(katakanlah 200px) dapat dibungkus?

Saya terbuka untuk segala jenis solusi seperti CSS, jQuery, dll.

Coba ini:

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

Pada bootstrap 3, pastikan spasi putih tidak diatur sebagai 'nowrap'.

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

Anda dapat menggunakan tanda hubung lunak seperti:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Ini akan muncul sebagai

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

jika kotak berisi tidak cukup besar, atau sebagai

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

jika memang.

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

Solusi ' word-wrap' hanya berfungsi di IE dan browser mendukung CSS3.

Solusi lintas browser terbaik adalah dengan menggunakan bahasa sisi server Anda (php atau apa pun) untuk mencari string panjang dan menempatkan di dalamnya secara berkala entitas html Entitas ​ ini memecah kata-kata panjang dengan baik, dan bekerja pada semua browser.

misalnya

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Satu-satunya yang berfungsi di IE, Firefox, chrome, safari, dan opera jika tidak ada spasi di kata (seperti URL yang panjang) adalah:

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

Saya menemukan ini sebagai bukti-peluru.

Ini berhasil untuk saya

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;

Opsi lain juga menggunakan:

div
{
   white-space: pre-line;
}

Ini akan mengatur semua elemen div Anda di semua browser yang mendukung CSS1 (yang hampir semua browser umum sejauh IE 8)

Lintas browser

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

Tambahkan CSS ini ke paragraf.

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" 

Contoh dari Trik 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;
}

Lebih banyak contoh di sini .

Solusi sisi server yang berfungsi untuk saya adalah: di $message = wordwrap($message, 50, "<br>", true);mana $messagevariabel string berisi kata / karakter yang harus dipecah. 50 adalah panjang maksimal dari setiap segmen yang diberikan, dan "<br>"merupakan teks yang ingin Anda masukkan setiap (50) karakter.

Coba ini

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

properti text-overflow: ellipsis add ... dan line-clamp menunjukkan jumlah baris.

Dalam tubuh HTML coba:

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

Dalam tubuh CSS coba:

background-size: auto;

table-layout: fixed;

Coba ini

div {display: inline;}

Saya telah menggunakan bootstrap. Kode html saya terlihat seperti ..

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

Anda dapat menggunakan CSS ini

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

mencoba:

overflow-wrap: break-word;

Gunakan word-wrap:break-wordatribut bersama dengan lebar yang dibutuhkan. Terutama, letakkan lebar dalam piksel, bukan dalam persentase.

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