CSS3 Utwórz tekst tak duży, jak to możliwe Element FIll bez przepełnienia

Question

Buduję aplikację na klawiaturę dla IOS i mam jedną etykietę <p>, której zawartość musi być dokładnie jedna linia w poprzek.

Elementy te mają pełną szerokość urządzenia bez odrobiny zewnętrznego wypełnienia. Chcę, aby tekst był skalowany tak, aby był możliwie jak największy rozmiar czcionki bez zawijania do następnej linii, bez obcięcia przez elipsę, przycięcia lub przepełnienia.

Do tej pory mogę to osiągnąć, precyzyjnie ustawiając rozmiar czcionki (co można zrobić - jest tylko około 10 urządzeń do przemyślenia), ale wolałbym, aby wyświetlacz IOS UIWeview zrozumiał to dla mnie.

Czy można to osiągnąć za pomocą CSS?

Answer 1

z CSS tylko można to osiągnąć stosując Units rzutni ustawiając rozmiar czcionki, aby wypełnić przestrzeń, ale teraz z rozmiaru tekstu reagującego na podstawie szerokości rzutni za.

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

Oto prosty demo za pomocą VW jednostki: https://jsfiddle.net/gmattucc/mh3rsr0o/

Trzeba by sprawdzić, czy VW, jednostki VH są obsługiwane w urządzeniu są kierowane: http://caniuse.com/#feat=viewport-units

kupili także do zapoznaj się z tym artykułem, aby dowiedzieć się więcej: https://css-tricks.com/viewport-sized-typography/