White-Space: Controle quebras de linha com CSS
Sabe aquele título que deveria ficar numa linha só e não fica? Hoje vou dar uma dica rápida de como configurar quebras de linha com css. White-space é a propriedade que define o comportamento das quebras de linha.
- white-space: normal – mantém o elemento no padrão.
- white-space: pre – quebras de linha no código viram quebras de linha no layout (Ie6 incompatível) – equivalente í tag
pre - white-space: nowrap – não quebra linha de jeito nenhum.
Um exemplo prático:
p {
white-space: nowrap;
}
Bem simples, não é?
Rodrigo
Obrigado pela dica!
Eu estava a mais de um dia tentando entender porque meu código nao funcionava e entao achei seu blog…
Valeu cara! 🙂
Sucesso!
zaqueu
bom, seu blog é mesmo muito interessante, mas meu problema prossegue.
a quebra de linha ta funcionando beleza no mozila , no IE 8, mas no IE 7 fica uma m….
preciso resolver isso o mais rápido possivel.
valdeir
Vlw pela dica.
Mas e se eu colocar letras sem espaço
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa assim dai como que faz pra quebrar?
marcelo
coloca um overflow:hidden que mata essa prezepgem. acredito que somente links grandes fiquem formatados assim.
Érica
Use a propriedade do CSS3
word-wrap: break-word;
Thiago Alves
Marcelo, valeu a dica do “overflow”, tinha uma página com visualização de email e não tava conseguindo quebra as linhas da mensagem… A saída foi scroll, mas ficou até melhor do que eu pojetei.. =D
Valeu!
Julierme Braga
para resolver essa quebra de linda é só colocar no seu CSS
white-space: pre-wrap;
word-wrap: break-word;
espero ter ajudado!
Clã Celestial Blog
Só com CSS3 ou com overflow mesmo.
Moises
Simples e resolveu meu problema! Obrigado.
[]’s
Adriano Ricardo]
VALEW VALEW !!
Estava fazendo um menu pro topo com submenus, e os links com espaço fiacavam quebrando, agora solucionou o problema hehe
Não que eu vá implementar layout pra ie6, mas por fins de curiosidade e estudo teria algum truque pra ele?
Mais uma vez valew. Dia muito boa!
Adriano Ricardo
Eita, eu aqui novamente, agora estou em outro projeto e já tinha me esquecido, voltei pra me recordar, um grande abraço e valew !
jose
como faço para dar um espaço entre o testo e a borda da div, coloco o padding, mais si quero no texto não na imagen,como fazer isso,Vlw
electro enjoy
funcionoou ake vlw ^^
Rodrigo Andrade
overflow:hidden;
word-wrap: break-word;
Isso resolveu meu problema
Rodrigo Andrade
overflow:hidden;
word-wrap: break-word;
Isso resolveu meu problema!
Fernando Tavares
Muito obrigado, ajudou pra caramba
Marcelo
Resolveu meu problema de quebra de linha dentro das células das tabelas.
Eduardo
Me ajudou com uma tarefa aqui. Valeu!
João vitor
Vlw amigo! Tava há dias tentando resolver um problema com espaço. Me ajudou muito!
Rafael
muito bom, velu
Matheus
Eai rapaze, tudo bem?
Olha que loucura, estou em um projeto e tendo alguns problemas com layout no IE8. Quando session_start, as linhas de texto não são quebradas mesmo utilizando overflow: hidden, ou qualquer outro desses atributos. Podem me ajudar?
agradeço desde já!!
Alex
Muito obrigado, funcionou perfeitamente.
______ ______
An interesting discussion is worth comment. There’s no doubt that that you ought to publish more on this subject,
it may not be a taboo matter but typically people don’t speak about such subjects.
To the next! Kind regards!!
main-ews.com
https://main-ews.com/ats/index.php?a=stats&u=emanoel6954
Carlos
Olá
Fiz uma analise em meu site por meio do site seositecheckup.com ,e uma das coisas que ele me mostra é List of elements with inline css style (Lista de elementos com estilo css inline)
Está linha
Seria um tipo de correção para fazer?
Se for,como faço?
Edilson
matou a pau velho! haha
www.indyarocks.com
Quality articles or reviews is the key to invite the people to pay a visit the website, that’s what this site
is providing.
Best products for going natural
Wow, that’s what I was seeking for, what a data! existing here at this blog, thanks admin of this web page.
Priscila
Muito obrigada, me ajudou muito! Sucesso!
Lucas de Oliveira
Baita dica. Me ajudou muito aqui. Não conhecia essa propriedade.
Obrigado por compartilhar! =)
___________
It’s truly very difficult in this busy life to listen news on TV, thus I only
use world wide web for that reason, and take the newest
news.
Teste
Teste: console.log(“XSS”)
cyber security courses london
I was recommended this blog by means of my cousin. I’m no longer certain whether or not this publish is written by means of him
as nobody else understand such precise about my trouble.
You are incredible! Thank you!
a href="" title="">
a href=”” title=””>