Neste post vamos tratar uma situação real que vivi para obter um Layout Fluído
Quebra de textos longos
Esta é uma situação que vou compartilhar.
No Markdow ao usar um código (ver Markdown no Blog) ele cria as tags html pre code , todavia, quando a linha estava muito grande aumentava a largura das colunas.
Solução pronta
Você tem a opção de um CSS pronto como o Bootstrap, mas eu particularmente optei por construir meu css do zero, para ter controle total do design.
Dica sobre o uso de IA
A IA pode nos ajudar com o CSS mas não é tão simples quanto alguns pensam. Para fazer uma pergunta adequada a IA você primeiro precisa identificar a causa do erro e posteriormente você pode solicitar a uma IA que te auxilie no css em desenvolvimento.
No meu caso eu perdi um tempão pensando que era a largura da coluna que não estava se ajustando, quando na verdade determinadas frases muito grandes não quebravam.
Para identificar a causa primeiro você deve compreender o seu css, sempre inspecione a pagina.
Então simples é mais ! Menos linhas por favor !
Subdivida este css entre os componentes na medida do possível.
Comece no global.css e depois transponha para os componentes com styled-components ou Sass.
Contudo, aprenda com aquilo que já vivenciou, anote e organize seu aprendizado, para não perder seu tempo, ser mais produtivo e efetivamente aprender. Quando temos que perguntar sempre a alguém ou a uma IA, isso nos alerta que não aprendemos durante as jornadas anteriores. A tecnologia da IA existe e deve ser utilizada, mas lembre-se, um dia pode precisar trabalhar off-line ou aquela IA que utiliza pode começar a cobrar pelo serviço.
Passando a situação a IA
Depois informei a IA que queria que a linha quebra-se em pre code, compartilhei parte do meu css e em seguida ele me deu o código abaixo como resultado.
pre code {
column-width: 100%;
background-color: var(--C1);
white-space: pre-wrap; /* ou quebra de linha */
word-break: break-all; /* ou quebrar palavras longas */
overflow-x: auto; /* ou rolagem horizontal, se necessário */
}
.language-python, .language-javascript, .language-css {
white-space: pre-wrap; /* ou quebra de linha */
word-break: break-all; /* ou quebrar palavras longas */
}
Para quem usa WordPress
Faça o seu Css global e quando utilizar HTML no Elemenum faça um CSS mais específico.
No Global associe por tag html ou as classes, entretanto, se for algo muito específico associe pelo id e coloque no CSS local do HTML.
Neste post vimos uma situação real para criar um Layout Fluído.