Uzun metni / kelimeyi sabit bir genişlik aralığında nasıl kaydırabilir veya kesebilirim?

Aralıkta <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>uzun bir aralıksız metin dizisi gibi herhangi bir şey yazdığımda , sözcük (ler) kırılacak veya sonraki satıra kaydırılacak sabit genişlikte bir yayılma alanı oluşturmak istiyorum .

Herhangi bir fikir?

word-wrap:break-word;Yayılma genişliğiniz için çok uzunsa kelimeleri bozan CSS özelliğini kullanabilirsiniz .

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Aşağıdakileri ekleyerek css'yi takip etmeyi deneyin white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

Bunun gibi

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

Varsayılan olarak a spanbirinline öğedir ... yani bu varsayılan davranış değildir.

Sen yapabilir spanekleyerek davranmasına şekilde display: block;sizin CSS.

span {
    display: block;
    width: 100px;
}

Bunu dene

span {
    display: block;
    width: 150px;
}

Sadece sorunun pratik kapsamını genişletmek için ve verilen cevaplara bir ek olarak: Bazen seçicileri biraz daha fazla belirtmek gerekebilir.

Tam aralığı display: inline-block olarak tanımlayarak, görüntüleri görüntülemekte zorlanabilirsiniz.

Bu nedenle, şöyle bir aralık tanımlamayı tercih ediyorum:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

Benim durumumda, display: block tasarımı amaçlandığı gibi bozuyordu.

max-widthTesis, beni kurtardı.

ve stil için de kullanabilirsiniz text-overflow: ellipsis.

benim kodum

max-width: 255px
overflow:hidden