CSS max-inline-size
La proprietà CSS3 max-inline-size imposta la larghezza massima in linea
La proprietà max-inline-size limita la larghezza massima che un elemento può occupare lungo la direzione del testo (in linea). È particolarmente utile per contenuti testuali o layout flessibili, in modo da garantire una leggibilità ottimale e un buon adattamento ai dispositivi mobili.
Sintassi
Significato dei valori principali:
-
auto: L'elemento si adatta liberamente in larghezza al contenuto e al contesto (valore predefinito). -
lunghezza: Specifica un valore massimo per la larghezza in linea, ad esempio300px,50%,20em, ecc. -
fit-content: Adatta la larghezza in base al contenuto, evitando overflow e spazi inutili. -
min-content/max-content: Definiscono limiti basati sul contenuto minimo o massimo necessario per l'elemento.
Esempio proprietà: max-inline-size
Codice Esempio: max-inline-size
.max-inline-size-example {
max-inline-size: 400px;
border: 2px solid #50a14f;
padding: 15px;
background-color: #f0f4f8;
font-size: 18px;
line-height: 1.6;
margin: 0 auto;
}
Contenuto Esempio: max-inline-size
Esempio di utilizzo di max-inline-size
In questo esempio, max-inline-size viene utilizzato per limitare la larghezza di un elemento testuale, che altrimenti potrebbe espandersi troppo in orizzontale:
CSS e HTML per l'esempio con max-inline-size:
<style>
.max-inline-size-example {
max-inline-size: 400px;
border: 2px solid #50a14f;
padding: 15px;
background-color: #f0f4f8;
font-size: 18px;
line-height: 1.6;
margin: 0 auto;
}
</style>
<div class="max-inline-size-example">
Questo testo si adatta alla dimensione massima in linea impostata...
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
