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

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

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