Bagaimana cara membungkus atau memecah teks / kata panjang dalam rentang lebar tetap?

104

Saya ingin membuat span dengan lebar tetap yang ketika saya mengetikkan apa pun dalam span seperti <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, string panjang teks tanpa spasi, kata putus atau bungkus ke baris berikutnya.

Ada ide?

html css محمد کثیری
sumber

Jawaban:

192

Anda dapat menggunakan properti CSS word-wrap:break-word;, yang akan merusak kata-kata jika terlalu panjang untuk lebar bentang Anda. 

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
Luaskan cuplikan

Maxime Lorant
sumber
1
Bekerja dengan baik untuk kontrol label asp.net. Terima kasih!
etlds
41
Menambahkan white-space: normalbantuan untuk menimpa gaya luar yang mungkin menghalangi :) .. inline-blockbekerja sebaikblock
Katia
Bagaimana dengan mematahkan dua bentang yang berada di dalam elemen blok?
Daniel Springer
Bagi mereka yang masih mengalami masalah setelah menggunakan jawaban ini, pastikan untuk menentukan 'lebar' jika tidak maka tidak akan berhasil
Staccato
Perlu memiliki lebar untuk mengetahui di mana harus istirahat
DFSFOT
40

Coba css berikut dengan tambahan white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}
Gerard de Visser
sumber
5
Terima kasih! Saya tidak tahu mengapa teks saya tidak pernah terbungkus! ruang putih adalah alasannya.
mdiehl13
1
Masalah saya juga diperbaiki setelah saya meletakkan:white-space: normal
majorBummer
Berikut adalah tabel referensi jika Anda membutuhkan white-space dan wrapping: css-tricks.com/almanac/properties/w/whitespace
Hritik
16

Seperti ini

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}
Falguni Panchal
sumber
teman saya, saya ingin ketika meletakkan lebar bentang: 50px; nilai dalam rentang saya hanya ditampilkan dalam 50 piksel dan nilai lainnya ke baris berikutnya dan ditampilkan dalam 50 piksel !!!
محمد کثیری
1
@ mamal10 Periksa solusi Maxime Lorant.
Mr_Green
3

Secara default, a spanadalahinline elemen ... jadi itu bukan perilaku default.

Anda dapat membuat spanperilaku seperti itu dengan menambahkan display: block;ke CSS Anda.

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

sumber
1

Coba ini

span {
    display: block;
    width: 150px;
}
Eswara Reddy
sumber
0

Hanya untuk memperluas cakupan praktis dari pertanyaan dan sebagai lampiran dari jawaban yang diberikan: Kadang-kadang seseorang mungkin merasa perlu untuk menentukan selektor sedikit lebih banyak.

Dengan menentukan rentang penuh sebagai display: inline-block Anda mungkin kesulitan menampilkan gambar.

Oleh karena itu saya lebih suka mendefinisikan span seperti ini:

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;
}
leopold
sumber
0

Dalam kasus saya, display: block merusak desain seperti yang diinginkan.

The max-widthproperti hanya menyelamatkan saya.

dan untuk penataan, Anda juga bisa menggunakannya text-overflow: ellipsis.

kode saya adalah

max-width: 255px
overflow:hidden
sh6210
sumber