Bagaimana bisa teks seperti aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
yang melebihi lebar div
(mengatakan 200px
) dibungkus?
Saya terbuka untuk setiap jenis larutan seperti CSS, jQuery, dll.
Anda dapat menggunakan tanda hubung lembut seperti:
aaaaaaaaaaaaaaa&malu;aaaaaaaaaaaaaaa
Ini akan muncul sebagai
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
jika kotak yang berisi isn't yang cukup besar, atau
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
jika hal ini.
div {
// set a width
word-wrap: break-word
}
The 'word-wrap
' solusi hanya bekerja di IE dan browser yang mendukung CSS3
.
Terbaik cross browser solusinya adalah dengan menggunakan bahasa server side (php atau apapun) untuk mencari panjang string dan tempat di dalam mereka dalam interval reguler html badan ​
Entitas ini istirahat panjang kata-kata yang baik, dan bekerja pada semua browser.
misalnya
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Satu-satunya yang bekerja di IE, Firefox, chrome, safari dan opera jika tidak ada spasi di word (seperti URL yang panjang) adalah:
div{
width: 200px;
word-break: break-all;
}
Saya menemukan ini menjadi peluru-bukti.
.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+ */
}
Dalam HTML tubuh mencoba:
<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>
Di CSS tubuh mencoba:
background-size: auto;
table-layout: fixed;
Server side solusi yang bekerja untuk saya adalah: $pesan = wordwrap($pesan, 50, "<br>", true);
mana $pesan
adalah variabel string yang berisi kata/karakter yang akan dipecah. 50 adalah panjang maksimum dari setiap segmen tertentu, dan "<br>"
adalah teks yang anda inginkan untuk dimasukkan 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 tambahkan ... dan garis-clamp menunjukkan jumlah baris.
Saya telah menggunakan bootstrap. Saya html 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;
}