Cum poate text ca aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
care depășește lățimea de un div
(spun 200px
) fi înfășurat?
Eu sunt deschis la orice fel de soluție, cum ar fi CSS, jQuery, etc.
Puteți utiliza un soft cratimă astfel:
aaaaaaaaaaaaaaa&timid;aaaaaaaaaaaaaaa
Acesta va apărea ca
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
în cazul în care caseta nu este't suficient de mare, sau cum
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
dacă este.
div {
// set a width
word-wrap: break-word
}
Ca ' cuvânt-wrap' soluție funcționează numai în IE și browsere de sprijin
CSS3`.
Cel mai bun browser-ul cruce soluție este de a utiliza server-side language (php sau orice altceva) pentru a localiza șiruri lungi și au loc în interiorul ei în intervale regulate html entitate ​
Această entitate pauze lungi cuvinte frumos, și funcționează pe toate browserele.
de exemplu
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Singurul care functioneaza pe IE, Firefox, chrome, safari și opera, dacă nu există spații în cuvânt (cum ar fi un URL lung) este:
div{
width: 200px;
word-break: break-all;
}
Am găsit acest lucru să fie anti-glont.
O altă opțiune este, de asemenea, folosind:
div
{
white-space: pre-line;
}
Acest lucru va stabili toate div elemente în toate browserele care acceptă CSS1 (care este destul de mult toate browserele comune, în măsura înapoi ca IE 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+ */
}
În HTML corpul încerca:
<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>
În CSS corpul încerca:
background-size: auto;
table-layout: fixed;
Exemplu de Trucuri 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;
}
Mai multe exemple here.
O soluție de server care funcționează pentru mine este: $mesaj = wordwrap($mesaj, 50, "<br>", true); "unde" $mesaj
este un șir de variabile care conțin cuvântul/caractere să fie rupt. 50 este lungimea maximă a unui anumit segment, și"
" este textul pe care doriți să fie inserat în fiecare (50) de caractere.
Încercați acest lucru
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;
}
proprietatea text-overflow: elipsă add ... si line-clemă arată numărul de linii.
Eu am folosit bootstrap. Meu cod html se pare ca ..
<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;
}