Jump to content

HTML CSS (Node.js) - Como resolver problema de quebra de linha no <h2>?

AfroditeSanliveira

Por AfroditeSanliveira
em HTML & CSS

 Compartilhar
Ir para a Solução Solucionado por lizandro,

Postagens Recomendadas

AfroditeSanliveira

AfroditeSanliveira

Postado
Postado

Boa noite,

Sou nova na área de T.I e estou praticando meu front end, mesmo não querendo trabalhar com isso.

No meu código eu tenho um <h1> que está funcionando do jeito que eu queria, mas um <h2> que não está.

Aqui está o estilo que estou utilizando: 

body {
   background-color: #090A0E;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: stretch;
}

h1 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: #EDEDED;
   font-size: 60px;
   margin-left: 200%;
}

h2 {
   font-family: Georgia, 'Times New Roman', Times, serif;
   color: #EDEDED;
   font-size: 25px;
   text-align: right;
   margin-left: 230%;
}

O <h1> está tudo bem, mas o <h2> não está em linha horizontal, está separando em colunas, assim: 

exemplo
de
h2
indesejado

Sempre com UMA palavra por linha e quebrando linha. Alguém poderia me ajudar?

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para HTML CSS (Node.js) - Como resolver problema de quebra de lnha no <h2>?
  • Solução
lizandro

lizandro

Postado
  • Solução
Postado

Boa tarde, @AfroditeSanliveira. Tudo bem?

Espero que esteja bem.

Para investigar o seu problema, criei um HTML básico e utilizei o CSS fornecido. O resultado que obtive foi um pouco diferente do esperado: a página apareceu totalmente em preto, sem exibir os títulos h1 e h2.

Após testar, identifiquei que o problema está relacionado à propriedade margin-left dos elementos h1 e h2. Os valores informados (200% e 230%) criam margens muito grandes, fazendo com que os títulos fiquem fora da tela. Se você reduzir esses valores, por exemplo, para 10%, os títulos passarão a aparecer um abaixo de outro, conforme abaixo:

image.png

Html usado no teste: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de CSS</title>
    <style>
        body {
            background-color: #090A0E;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: #EDEDED;
            font-size: 60px;
            margin-left: 200%;
        }

        h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: #EDEDED;
            font-size: 25px;
            text-align: right;
            margin-left: 230%;
        }
    </style>
</head>
<body>
    <h1>Exemplo de Título H1</h1>
    <h2>Exemplo de Subtítulo H2</h2>
</body>
</html>

É possível que o seu HTML tenha alguma diferença em relação ao que eu criei, o que pode estar causando  a quebra do h2.

Por exemplo, alterei o html acima informando o h2 dentro de <span> e no css, informei um tamanho pequeno desse container forçando o texto do h2 quebrar conforme o seu problema. 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de CSS</title>
    <style>
        body {
            background-color: #090A0E;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: #EDEDED;
            font-size: 60px;
            margin-left: 10%;
        }

        h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: #EDEDED;
            font-size: 25px;
            text-align: right;
            margin-left: 10%;
        }
        span {
            width: 20px;
        }
    </style>
</head>
<body>1
    <h1>Exemplo de Título H1</h1>
    <span><h2>Exemplo de Subtítulo H2</h2></span>
</body>
</html>1

Esse HTML resulta em um h2 quebrado, conforme o problema que você mencionou, porque o container span é pequeno demais para acomodar o elemento h2 nele.

image.png

Para resolver esse problema, basta aumentar a propriedade width da tag span.

Espero que as informações tenham sido úteis para resolver o seu problema. Caso precise de mais assistência, fique à vontade para compartilhar o HTML para que possamos avaliá-lo juntos.

Obrigado

Lizandro Marques

  • Ajudou! 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para HTML CSS (Node.js) - Como resolver problema de quebra de linha no <h2>?

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos
×
×
  • Create New...