Nasıl bir çizgi üzerinde sözcük-break için?

oy
60

nispeten basit bir CSS Verilen:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Dize kadar kısıtlı kaldığından nasıl bu kadar yapabilirim widthait 150 ve sadece tire üzerinde bir satır için sarar?

Oluştur 04/08/2008 saat 01:17
kaynak kullanıcı
Diğer dillerde...                            


11 cevaplar

oy
63

Bu konudaki tire değiştirin:

&shy;

Bu bir "yumuşak" tire denir.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Cevap 04/08/2008 saat 01:25
kaynak kullanıcı

oy
31

Tüm modern tarayıcılar içinde * (ve bazı eski tarayıcılar da), <wbr>eleman belirli noktalarda uzun kelimeleri kırmak için fırsat sağlamak için mükemmel bir araçtır.

söz konusu bağlantıdan alıntı:

Kelime Molası Fırsat ( <wbr>) HTML öğesi onun satır bölme kuralları aksi söz konusu konumda bir mola oluşturmak olmaz gerçi tarayıcı isteğe bağlı olarak bir çizgi bozabilir metin içinde bir konumu temsil eder.

İşte OP'ın örnekte kullanılan (ya da eylem olarak görmek mümkündür nasıl JSFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* Ben IE9, IE10 ve Chrome, Firefox ve Opera ve Safari'nin son sürümlerinde test ettik.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Cevap 30/01/2012 saat 07:53
kaynak kullanıcı

oy
17

CSS3 bir parçası olarak, henüz tam olarak desteklenmez, ancak burada kelime-sarma hakkında bilgi bulabilirsiniz . Başka bir seçenek ise WBR etiketi, & utangaç ;, ve & # 8203; hiçbiri tamamen ya desteklenmektedir.

Cevap 04/08/2008 saat 01:25
kaynak kullanıcı

oy
8

Bu özel örnekte bu sunucu tarafında metin dönüştürmek istiyorum (dize tire içerecek şekilde nereye gittiğini):

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Cevap 05/12/2008 saat 13:36
kaynak kullanıcı

oy
8

Google Chrome, Safari (Windows) ve IE8 tahmin edildiği gibi örnek çalışır. Metin Firefox 3 ve Opera 9.5 içinde 150px kutunun dışında kırar.

Ayrıca &shy;bu ya olacak şekilde, sizin örneğin çalışmaz:

  • çalışırken kelime kıran ama değilken sözcük dönüyor herhangi tire göstermez veya

  • iş değilken kelime kıran ama kelime kıran o yana bir mola bir tire ekler iki tire ekran.

Cevap 16/09/2008 saat 00:15
kaynak kullanıcı

oy
7

Tam olarak görmek istediğiniz bağlı olarak, bir arada kullanabilirsiniz hyphen, soft hyphenve / veya zero width space.

Yumuşak bir tire günü, tarayıcı sözcük sonu (bir tire ekleyerek) olabilir. sıfır genişlik alanı üzerinde, tarayıcı kelime sonu (bir şey eklemeden) can.

Böylece, kodunuz gibi bir şey ise:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

Daha sonra tarayıcınızın hiçbir kelime ara ile bu gösterecektir:

1111112222222-33333334444444-5555555

ve bu olası her kelime-break yapacaktır:

111111-
222222-
-333333
444444-
555555

Sadece ihtiyacınız olan seçeneği pick up. Senin durumunda, bu 4s ve 5 sn arasındaki biri olabilir.

Cevap 16/09/2010 saat 10:04
kaynak kullanıcı

oy
1

Ayrıca kullanabilirsiniz :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

çıktı:

abababababa
ababababbba
abbabbababa
ababb

word-break bile tüm kelime ya da satır sonu olduğu cümlede hiçbir boşluk değil sağlanan genişlik ve yükseklikte ayaklar. Eğer bir genişlik veya yüksekliği sağlamak olmalıdır bunun için somun.

Cevap 27/08/2015 saat 12:40
kaynak kullanıcı

oy
0

Sen tire karakterinden sonra 0 genişlikte boşluk kullanabilirsiniz:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

Sen istersen tire önce satır sonu kullanmak &#8203;-yerine.

Cevap 13/09/2018 saat 10:21
kaynak kullanıcı

oy
0

Bu yardımcı olabilir Umut

kullanmak <br>çizgiyi kırmak istediğiniz (mola) etiketi.

Cevap 31/08/2017 saat 10:53
kaynak kullanıcı

oy
0

Yerine -kullanabilirsiniz &hyphen;ya \u2010.

Ayrıca, emin olun tire css özelliği oldu değil ayarlı hiçbiri (varsayılan değerdir manuel ).

<wbr>tarafından desteklenmemektedir Internet Explorer .

Cevap 14/05/2015 saat 04:29
kaynak kullanıcı

oy
0

bölünemez kısa çizgi iyi çalışıyor.

HTML Varlığı (ondalık)

&#8209;
Cevap 21/03/2014 saat 23:09
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more