css taşması - yalnızca 1 metin satırı

134

divAşağıdaki css stiline sahibim :

width:335px; float:left; overflow:hidden; padding-left:5px;

Buna divuzun bir metin satırı eklediğimde, yeni bir satıra bölünüyor ve tüm metni görüntülüyor. İstediğim tek satırlık bir metin satırına sahip olmak. Metin uzun olduğunda, bu taşan metnin kaybolmasını istiyorum.

Yüksekliği ayarlamayı düşünüyordum ama yanlış gibi görünüyor.

Belki yazı tipiyle aynı yükseklik eklersem, çalışmalı ve farklı tarayıcılarda herhangi bir soruna neden olmamalı?

Bunu nasıl yapabilirim?

html css overflow

— homerun
kaynak

JsFiddle'da sorununuzu gösterebilir misiniz?

— Harry Joy

352

Bir satırla sınırlamak istiyorsanız white-space: nowrap;, div'i kullanın .

— Septnuits
kaynak

Ancak metin belirtilen boyutun ötesine geçerse üç nokta göstermez. stackoverflow.com/questions/26342411/…

— SearchForKnowledge

Harika çalışıyor. Ama ...gösterilecek daha fazla karakter olup olmadığına ihtiyacım var çünkü satır uzunluğu uzun olduğunda ve yazılı div dışına çıktığında.

— Moshii

Gizli metin hiper bağlantılar içeriyorsa bu garip davranır. Sayfada sekme yaparsam, gizli metindeki bağlantının gizlenmesi gerektiğinde ekrana kaymasına neden olur.

— Eric

76

O div'de hala daha fazla içerik bulunduğunu belirtmek istiyorsanız, muhtemelen "üç nokta" göstermek isteyebilirsiniz:

text-overflow: ellipsis;

Bu, white-space: nowrap;Septnuits'in önerisine ek olarak olmalıdır .

Ayrıca, bunu Firefox'ta ele almak için bu konuyu kontrol ettiğinizden emin olun .

— Mouli
kaynak

47

Sana kullanmalıdır inanıyoruz text-overflow: ellipsis;ile overflow: hidden;ve white-space: nowrap;o iş yapmak

— Francisco Costa

caniuse.com/#feat=text-overflow aka. Evet yapabilirsin. Kullanıcının yine de erişebilmesi için içeriğin tamamını başlık özniteliğine koymayı düşünün.

— DanMan

benimki sadece bir satırda görünüyor ve üç nokta gösterilmeden önce DIV'yi doldurmuyor ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

44

Bu css kodunu kullanabilirsiniz:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

Metin taşma CSS özellik metni öğenin kutusunu taştığında kırpılır durumlarla ilgilenir. Bu edilebilir kısaltıldı (yani kesilmiş, gizli) bir gösterilecek üç nokta ( '...' Unicode aralığı değeri U + 2026).

Not metin taşma kabın taşması özellik değerine sahip sadece oluşan gizli , kaydırma veya otomatik ve beyaz boşluk: nowrap; .

Metin taşması yalnızca blok veya satır içi blok seviyesindeki öğelerde olabilir, çünkü öğenin taşması için genişliğe sahip olması gerekir. Taşma, yön özelliği veya ilgili öznitelikler tarafından belirlenen yönde gerçekleşir.

— Gaurav Tripathi
kaynak

6

UX ve UI için en iyi kod

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

— Omid Ahmadyani
kaynak

0

Ek olarak lütfen, eğer uzun bir metniniz varsa lütfen aşağıdaki css kodunu kullanabilirsiniz;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

tüm satır metnini görünür yapın.

— shafii muhudi
kaynak

0

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Tek satırda taşmayı ayarlamak için genişliği de tanımlayın

— Jaydeep Kataria
kaynak

-2

Ben de aynı sorunu yaşadım ve şunu kullanarak çözdüm:

display: inline-block;

üzerine divsöz.

— Dekcolnu
kaynak