Soru HTML'de, bir ipucu sarma kelimesi eklemek mümkün mü?


DIV'de uzun, çok kelimeli bir metin satırım olduğunu düşünün:

Merhaba merhaba sevgili müşteri. Lütfen teklifimize bir göz atın.

DIV dinamik bir genişliğe sahiptir. Yukarıdaki metni kelime olarak yazmak istiyorum. Şu anda, sarma, birinci satırın uzunluğunu en üst düzeye çıkaran bir kelime sınırında gerçekleşir:

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

Sarma işleminin cümle sınırında olmasını tercih ederim. Ancak, herhangi bir kaydırma gerekli değilse, hattın tek olarak kalmasını isterim.

Benim amacımı göstermek için lütfen çeşitli DIV genişliklerine bakın ve metnimin nasıl kaydırılmasını istiyorum:

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

Kelimelerle, sözcük kaydırma işlemi önerilen hece sınırlarında gerçekleşecek şekilde yumuşak bir tire kullanabilirsiniz. Sarma gerektirmezse, ­ görünmez kalır. Eğer ambalaj gerekli ise ­ nerede olur

magnifi­cently

HTML'de kelime sarmalamaya yönelik benzer bir yöntem var mı?


18
2018-04-19 10:46


Menşei




Cevaplar:


kullanım &shy; kelimelerle veya <wbr> kelimeler arasında <wbr> kısa çizgi eklemez.

Ayrıca bakınız:


17
2018-04-19 10:54



Gmail’in kullanımı gibi Google’ın webapps’lerini fark ettim. <wbr> kelimeler içinde bile. - hippietrail


Tam olarak değil ama yakın: http://jsfiddle.net/uW4h8/1/.

Kısacası, ayarlamanız gerekir white-space: nowrap; sizin için metin kabı ve kullanımı <wbr> İstediğiniz kelimeler arasında ara vermek.


6
2018-04-19 10:54



+1: Kodunuzu bir dahaki sefere kısa bir özetini de ekleyiniz. <wbr> olası bir çözüm olarak. - Zeta
İpucu için teşekkürler, bitti. - Alexander Pavlov


Elementler <wbr> ve &nbsp; genellikle çalışır, ama her zaman değil. Özellikle, (a) çeşitli ekranlarda ve tarayıcılarda çalışmak zorunda olan ve (b) iyi görünmek zorunda olan statik bir açılış sayfası tasarlarken sorunludurlar.

Bu durumda çeşitli ekran çözünürlüklerinde satır sonu ipuçları üzerinde kontrol istiyorum. Bunu yapmak için kullanıyorum <br> etiketler ve css. Karmaşıklaşırsa karmaşaya dönüşebilir, ama bir noktaya kadar çalıştığını fark ettim. Örneğin:

<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>

Daha sonra CSS'yi çeşitli araların ne zaman tetikleneceğini belirtmek için medya sorguları ile kullanıyorum.

p.break-hints br {
  display: none;
}

@media only screen and (max-width: 300px) { 
  p.break-hints br.break-small {
    display: inline;
  }
}

p.break-hints br.break-big {
  display: inline;
}

2
2018-01-04 22:41





Aralıksız bir boşluk U + 00A0 kullanın (veya &nbsp; Eğer bir karaktere izin vermek için uygun bir yolunuz yoksa, bir satır sonu izin verilmediğinde sözcükler arasında ve aksi takdirde normal boşluk varsa.

Bu kelimeler, "-" tireleri içerdiğinde işe yaramaz ve parantez gibi diğer bazı karakterler de sorunlara neden olabilir, çünkü bazı tarayıcılar bunlara sonradan bir satır ayrılmasına izin veriyor. Görmek http://www.cs.tut.fi/~jkorpela/html/nobr.html problemlerle başa çıkmanın çeşitli teknikleri dahil olmak üzere uzun bir tez için. Ancak, normal noktalama işaretleri olan ve tire olmayan normal kelimeleriniz varsa, basit yaklaşımla iyi olmalısınız.


0
2018-04-19 12:58