Tamanho máximo em linha - CSS-Tricks

max-inline-sizeé uma propriedade lógica em CSS que define a largura máxima de um elemento quando writing-modeé horizontal ou a altura máxima do elemento quando writing-modeé vertical.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Como você deve ter adivinhado pelo exemplo acima, a writing-modepropriedade altera a orientação do texto e o fluxo do layout em 90 graus.

O principal motivo para mudar a orientação, além de criar designs sofisticados, é acomodar a internacionalização em um site. Muitos scripts do Leste Asiático, como chinês, japonês e coreano, podem ser escritos horizontal ou verticalmente. Usando propriedades lógicas, podemos fornecer a direção correta de dimensionamento dos elementos com base no modo de escrita do usuário.

Jen Simmons tem um artigo e uma apresentação que aprofundam os modos de escrita CSS.

Não podemos simplesmente usar a `max-width`propriedade?

Sim! Mas se você não oferece suporte ao Internet Explorer, não há motivo para não usá-lo max-inline-size. max-widthé uma dimensão física, então quando o modo de escrita muda, um elemento mantém seu tamanho de largura horizontal, quebrando um layout quando é configurado para ser vertical. Propriedades lógicas, como max-inline-size, podem responder a essas mudanças e aplicar o tamanho na orientação adequada.

Sintaxe

max-inline-size: ;

Inicial: auto
Aplica-se a: o mesmo que heightewidth
Herdado: não
Porcentagens: quanto à propriedade física correspondente
Valor calculado: igual a heightewidth
Tipo de animação: por tipo de valor calculado

Valores

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Quando writing-modeestiver definido como vertical-rl, o conteúdo girará, alterando o layout. A largura da max-widthcaixa irá girar com o conteúdo. Mas max-inline-sizeé inteligente! Ele deixa sua largura intacta, independentemente do writing-modevalor. Alterne writing-modena demonstração a seguir para ver a diferença entre os dois.