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.
  1. white-space: normal - mantém o elemento no padrão.
  2. white-space: pre - quebras de linha no código viram quebras de linha no layout (Ie6 incompatível) - equivalente à tag pre
  3. white-space: nowrap - não quebra linha de jeito nenhum.
Um exemplo prático:
p {
white-space: nowrap;
}
Bem simples, não é?

Tem sede de design e código? Siga-me no Twitter @richardbarros

34 comentá em “White-Space: Controle quebras de linha com CSS

  1. Rodrigo 24/09/2007 05:39

    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!

    Responder

  2. zaqueu 12/08/2009 07:25

    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.

    Responder

  3. valdeir 01/12/2010 13:14

    Vlw pela dica.

    Responder

  4. Mas e se eu colocar letras sem espaço 08/07/2011 13:36

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa assim dai como que faz pra quebrar?

    Responder

    marcelo Reply:

    coloca um overflow:hidden que mata essa prezepgem. acredito que somente links grandes fiquem formatados assim.

    Érica Reply:

    Use a propriedade do CSS3

    word-wrap: break-word;

    Thiago Alves Reply:

    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 Reply:

    para resolver essa quebra de linda é só colocar no seu CSS

    white-space: pre-wrap;
    word-wrap: break-word;

    espero ter ajudado!

  5. Moises 17/10/2011 10:56

    Simples e resolveu meu problema! Obrigado.
    []’s

    Responder

  6. Adriano Ricardo] 21/05/2012 07:46

    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!

    Responder

  7. Adriano Ricardo 23/08/2012 13:05

    Eita, eu aqui novamente, agora estou em outro projeto e já tinha me esquecido, voltei pra me recordar, um grande abraço e valew !

    Responder

  8. jose 21/06/2013 14:27

    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

    Responder

  9. Fernando Tavares 26/05/2014 10:29

    Muito obrigado, ajudou pra caramba

    Responder

  10. Marcelo 13/11/2014 20:52

    Resolveu meu problema de quebra de linha dentro das células das tabelas.

    Responder

  11. João vitor 10/12/2014 18:56

    Vlw amigo! Tava há dias tentando resolver um problema com espaço. Me ajudou muito!

    Responder

  12. Matheus 16/03/2015 15:59

    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á!!

    Responder

  13. Alex 19/06/2015 17:45

    Muito obrigado, funcionou perfeitamente.

    Responder

  14. ______ ______ 14/04/2017 21:51

    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!!

    Responder

  15. Carlos 30/04/2017 20:56

    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?

    Responder

  16. Edilson 19/05/2017 19:11

    matou a pau velho! haha

    Responder

  17. www.indyarocks.com 17/06/2017 22:12

    Quality articles or reviews is the key to invite the people to pay a visit the website, that’s what this site
    is providing.

    Responder

  18. Priscila 21/09/2017 22:11

    Muito obrigada, me ajudou muito! Sucesso!

    Responder

  19. Lucas de Oliveira 01/12/2017 14:51

    Baita dica. Me ajudou muito aqui. Não conhecia essa propriedade.
    Obrigado por compartilhar! =)

    Responder

  20. ___________ 13/06/2018 21:52

    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.

    Responder

  21. Teste 30/06/2018 09:38

    Teste: console.log(“XSS”)

    Responder

  22. 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!

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>