Taşan metni nasıl tarıyorsunuz?

Question

Dinamik olarak doldurulan, genellikle <li> için yalnızca bir veya iki sözcükle doldurulmuş, ancak zaman zaman daha uzun bir liste öğesi görüntülenen, sütun biçiminde sırasız bir liste var. Sütunlarımı korumak için, ben üç nokta ile bu uzun öğelerin aşırı Metni gizlemek için seçmiş:

li { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Ama yine bu öğelerin kullanıcı erişimi vermek istiyorum, bu yüzden bir vurgulu tarzı oluşturduk gibi pek:

li:hover { 
    overflow: visible; 
} 

Bu sütunlar arasındaki boşluğa metni ortaya çıkarır, ancak komşu <li> ulaştığında durur. <li>'un, diğerlerinin üzerinde ve opak bir arka plan üzerinde görüntülenecek şekilde, hoverize edilmesine öncelik vermek istiyorum. z-index ile oynamak, hile yapmadı. https://jsfiddle.net/9p7qeon2/

Answer 1

konu sizin sahip sütunlar üzerinde sabit bir genişliğe sahip bir sonucu olduğu gibi görünüyor: Burada

bir keman olduğunu. Örnek: column-width: 200px Çocuğunuzun üzerine geldiğinizde, saf CSS kullanarak üstteki genişliği değiştiremezsiniz. Sizin jQuery veya bir şey için UL (ana) öğeye .addClass kullanın ve sonra aşağıdaki gibi kullanın: ul.active { column-width: 300px; }, ancak bu diğer tüm öğeleri üzerinde istenmeyen etkilere sahip olacak.

Bu şekilde sabit bir genişliğe kullanarak farklı tarayıcılar arasında birçok sorunu olacağı bulacaksınız, örneğin sorununuzun kullanılır tarayıcıya bağlı biraz farklıdır:

• Firefox tam metni görüntülenir ancak arka plan rengini göstermez.
• Chrome ve MS Edge, arka plan rengini gösterecek ancak tam metni göstermeyecek ... ve bunun doğru olması, kapsayıcının 200px ile sınırlı olmasıdır. Tarayıcıların min-sütun genişliğini desteklediğine ve testlerimin bu sorunu çözmediğine inanmıyorum.

Daha büyük ekranlarda görüntülenecek ve ardından daha küçük ekranlarda gizlenen sabit bir yüzde kullanarak yüzer kullanabilirsiniz. Sizin için yapılmış olan JSFiddle'a bakın, açık bir şekilde bu kodun gereksinimlerinize uygun şekilde ayarlanması gerekecektir, ancak doğru yönde.

Özet ... sorun, genişlik olarak ayarlanmış olan 200px değerine sahip olmanızdır. Bu genişliği geçersiz kılmak için min-width, position: fixed veya position: absolute'u kullanmanız gerekir. Şu an düşünebildiğim bu kadar.

Answer 2

Bunu yapmak için yaptığım yol, LI içine bir açıklık eklemektir ve daha sonra vurgunun yayılma alanı position:absolute olur. Bununla birlikte, tam metnin nasıl gösterildiğini ve stilini kontrol edebilirsiniz. Sadece aşağı tarafı, LI'nın mutlak hale gelmesi nedeniyle yüksekliğini kaybetmeyecek bir yüksekliğe ihtiyaç duyacağıdır.