HTML'de metni nasıl sararsınız?

(Diyelim ) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaagenişliğini aşan metinler nasıl sarılabilir?div200px

CSS, jQuery gibi her türlü çözüme açıkım.

Bunu dene:

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

Bootstrap 3'te, beyaz boşluğun 'nowrap' olarak ayarlanmadığından emin olun.

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

Bunun gibi yumuşak bir kısa çizgi kullanabilirsiniz:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Bu şu şekilde görünecektir:

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

içeren kutu yeterince büyük değilse veya

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Öyleyse.

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

' word-wrap' Çözümü yalnızca IE'de ve tarayıcılarda desteklenir CSS3.

En iyi çapraz tarayıcı çözümü, uzun dizeleri bulmak ve düzenli aralıklarla içine yerleştirmek için sunucu tarafı dilini (php veya ne olursa olsun) html varlık kullanmaktır ​ Bu varlık uzun kelimeleri güzelce kırar ve tüm tarayıcılarda çalışır.

Örneğin

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Kelimede boşluk yoksa (uzun bir URL gibi) IE, Firefox, chrome, safari ve opera üzerinde çalışan tek kişi:

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

Bunu kurşun geçirmez buldum.

Bu benim için çalıştı

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;

Başka bir seçenek de kullanıyor:

div
{
   white-space: pre-line;
}

Bu, tüm div öğelerinizi CSS1'i destekleyen tüm tarayıcılarda ayarlayacaktır (IE 8'e kadar yaygın olarak kullanılan tüm tarayıcılar)

Çapraz Tarayıcı

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

Bu CSS'yi paragrafa ekleyin.

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" 

CSS Hilelerinden Örnek :

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

Daha fazla örnek burada .

Benim için çalışan bir sunucu tarafı çözümü: $message = wordwrap($message, 50, "<br>", true);nerede $messageparçalanacak kelime / karakter içeren bir dize değişkeni. 50, herhangi bir segmentin maksimum uzunluğudur ve "<br>"her (50) karakterde eklemek istediğiniz metindir.

Bunu dene

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

özellik metin taşması: üç nokta ekleme ... ve çizgi-kelepçe satır sayısını gösterir.

HTML gövdesinde şunları deneyin:

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

CSS gövdesinde şunları deneyin:

background-size: auto;

table-layout: fixed;

Bunu dene

div {display: inline;}

Bootstrap kullandım. Html kodum benziyor ..

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

bu CSS'yi kullanabilirsiniz

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

Deneyin:

overflow-wrap: break-word;

word-wrap:break-wordGerekli genişlikle birlikte özelliği kullanın . Temel olarak, genişliği yüzde olarak değil piksel olarak koyun .

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