CSS3 Metni Taşma Yeteneği Olmadan Mümkün Olduğu Kadar Büyük Hale Getir

Question

IOS için bir telefongap uygulaması yapıyorum ve içeriğinin tam olarak bir satır olması gereken bir <p> etiketi var.

Bu öğeler, aygıtın tüm genişliğine eksi bir dış dolguya sahiptir. İstediğim şey, metnin, elips tarafından veya kırpılarak veya taşması olmadan, bir sonraki satıra sarmadan mümkün olduğunca büyük bir font boyutuna ölçeklendirilmesidir.

Şimdiye kadar bunu, yazı tipi boyutunu hassas bir şekilde ayarlayarak gerçekleştirebilirim (ki bu sadece yapılabilecek yaklaşık 10 cihaz vardır), ancak IOS UIWeview ekranının benim için bunu benimsemesini tercih ederim.

Bunu CSS ile gerçekleştirmek mümkün mü?

Answer 1

Yalnızca CSS ile, alanı doldurmak için yazı tipi boyutunu ayarlayarak Viewport Units'u kullanarak, ancak şimdi görünüm genişliğine göre metin boyutuna duyarlı olarak ayarlayabilirsiniz. http://caniuse.com/#feat=viewport-units

Ayrıca isteyebilirsiniz: Sen vw, vh birimleri cihazda destekleniyorsa hedeflediğiniz kontrol etmesi gerekir https://jsfiddle.net/gmattucc/mh3rsr0o/

: Burada

p { 
    font-size: 7vw; //set to the preferred size based on length of text 
} 

vw birimlerini kullanarak basit bir demo Daha fazla bilgi için bu makaleye göz atın: vanilla CSS ile mümkün değil: https://css-tricks.com/viewport-sized-typography/