1

tl;dr Quando coloco um width no container do texto ele não quebra as linhas pra otimizar o espaço.

Sem definir nada o texto fica normal, e se eu redefinir o tamanho da tela ele vai quebrando naturalmente.

Mas não quero que ele ocupe toda a tela e pensei em definir um tamanho pra ele ocupar.

inserir a descrição da imagem aqui

Porém ao definir um tamanho especifico, o texto para de quebrar naturalmente se necessário...

inserir a descrição da imagem aqui

Codigo no codepen: https://codepen.io/utamo/pen/ErQegM

Fiz alguns <br> e "resolvi"o problema, mas queria que o mesmo ocorresse num container com tamanho especifico pra distribuição do texto ficar melhor.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    list-style-type: none;

}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 50ch auto;
    grid-template-areas: 
        "topo topo"    /* querie geral */
        "meio meio"
        "baixo baixo"
}

.header-container {
    grid-area: topo;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: 
        "left right"; /* sub grid do topo */
       
}
/* Header left side */
.leftz {
    grid-area: left;
    background: linear-gradient(
          rgba(89, 53, 15, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),url(imgs/matoi.png);
    background-size: cover;
    background-color: black;
    opacity: 0.7;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    border-bottom: 2px solid orange;
}
.logo-text {
    color: #f3f3f3;
    display: flex;
    line-height: 1.3rem;
    align-items: center;
    
}
.japword {
    align-self: center;
    font-size: 3rem;
    color: #ffb808;
}
.orange {
    color: orange;
}
.pointrem {
    font-size: .8rem;
    text-align: center
}
/* menu responsive */
.responsive-menu {
    display: none;
}
.hidden-search {
    padding: 1rem;
    position: relative;
    display: flex; /* vai usar isso no querie */
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
}
.fas {
    color: white;
}

/* Header right side */

.rightx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-area: right;
    background: #f1f1f1;
    border-bottom: 2px solid #ffc04c;
}
.rightx ul {
    display: flex;
    
}
.rightx a {
    margin: .6rem;
    color: black;
    
}

/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
}
.search-form input[type="text"] {
    padding: .2rem;
    border: none; 
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #e7c88f;
    
}
.mid-container {
    grid-area: meio;
    background: url(imgs/mako2.png);
    background-position: right;
    background-repeat: no-repeat;
    background-color: #fff4e3;

}
.text-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50ch;
}








/* Queries */
@media only screen and (max-width:860px) {
    .header-container {
        grid-template-areas: 
            "left left";
    }
    .rightx {
        display: none;
    }
    .leftz {
        background-position: 50% 30%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Anton|Fira+Sans|Oswald|Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <div class="grid-container">
       <!-- Parte do topo -->
        <div class="header-container">
           <!-- Parte esq do header -->
            <div class="leftz">
                <div class="logo-text">
                  <h1><span class="japword">た</span></h1>
                   <div>
                    <h1>/A/nime</h1>
                    <p class="pointrem">私たちを捕まえる</p> 
                   </div> 
                </div>
                <!-- Menu falho que n tentei direito com CSS -->
                <div class="hidden-search">
                <i class="fas fa-bars"></i>
                <div class="responsive-menu">
                 <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Animes</a></li>
                    <li><a href="#">Reviews</a></li>
                 </ul>
                </div>
                </div>
            </div>
            <!-- Parte dir do header -->
           <div class="rightx">
                <div> <!-- Menu -->
                   <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Animes</a></li>
                    <li><a href="#">Reviews</a></li>
                   </ul>
                </div>
                <div> <!-- Searh bar -->
                <form class="search-form">
                 <input type="text" placeholder="Find something new...">
                 <button type="submit"><i class="fa fa-search"></i></button>
                </form> 
                </div>  
            </div>
            </div>
            <!-- Começo do meio -->
            <div class="mid-container">
                <div class="mid-texts">
                <div class="text-container">
                    <p>ACTION, ADVENTURE</p>
            <h1>NEW KILL LA KILL EPISODES</h1>
            <p>The team that brought you Gurren lagann and panty &amp; Stocking reunited to present what is looking to be one of the most over the top action series in a long time!</p>
                </div>
            
                </div>
                
                
            </div>
     </div>
</body>
</html>

6
  • Ficou meio confusa sua questão, quanto ao que você quer fazer e a dificuldade que está tendo!
    – LeAndrade
    9/02/2019 às 11:25
  • Acho que tentei explicar demais e deixei confuso, mas enfim, basicamente eu quero definir uma "caixa" pro texto, mas quando faço isso o texto para de quebrar as linhas.
    – utm
    9/02/2019 às 11:31
  • Continuo sem entender, me parece que está normal. O texto quebra no & e começa na outra linha com Stocking, acaba com the e começa outra linha com most. Está quebrando o texto na largura que você definiu o container.
    – LeAndrade
    9/02/2019 às 11:42
  • 1
    @LeAndrade ele quebre ali pq é o final do container, mas quando vc diminui a tela o container não diminui de largura e mesmo quando a tela é bem menor a linha parava de quebrar. Depois da uma olhada na resposta ali que vc enter melhor. Resumindo em tela grande parece que esta certo, mas em tela de celular pequena a linha parava de quebrar
    – hugocsl
    9/02/2019 às 12:12
  • 2
    Boa Hugo, realmente não tinha entendido que o problema era em telas menores!
    – LeAndrade
    9/02/2019 às 12:18

1 Resposta 1

2

O "problema" é que vc colocou um width fixo, então se o width do box do container não muda o conteúdo que esta dentro dele sempre vai ocupar todo o espaço disponível.

inserir a descrição da imagem aqui

Entendido isso, veja que se vc colocar um max-width seu problema se resolve, pq agora o container vai ocupar no máximo um valor X e conforme ele for diminuindo a largura o conteúdo que está dentro dele vai se reajustando, como no caso do texto (nem todo elemento vai se comportar assim, principalmente se ele tb tiver valores fixos etc)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Anton|Fira+Sans|Oswald|Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <title>Document</title>

    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    list-style-type: none;

}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 50ch auto;
    grid-template-areas: 
        "topo topo"    /* querie geral */
        "meio meio"
        "baixo baixo"
}

.header-container {
    grid-area: topo;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: 
        "left right"; /* sub grid do topo */
       
}
/* Header left side */
.leftz {
    grid-area: left;
    background: linear-gradient(
          rgba(89, 53, 15, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),url(imgs/matoi.png);
    background-size: cover;
    background-color: black;
    opacity: 0.7;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    border-bottom: 2px solid orange;
}
.logo-text {
    color: #f3f3f3;
    display: flex;
    line-height: 1.3rem;
    align-items: center;
    
}
.japword {
    align-self: center;
    font-size: 3rem;
    color: #ffb808;
}
.orange {
    color: orange;
}
.pointrem {
    font-size: .8rem;
    text-align: center
}
/* menu responsive */
.responsive-menu {
    display: none;
}
.hidden-search {
    padding: 1rem;
    position: relative;
    display: flex; /* vai usar isso no querie */
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
}
.fas {
    color: white;
}

/* Header right side */

.rightx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-area: right;
    background: #f1f1f1;
    border-bottom: 2px solid #ffc04c;
}
.rightx ul {
    display: flex;
    
}
.rightx a {
    margin: .6rem;
    color: black;
    
}

/* Search bar */
.search-form {
    display: flex;
    border: none;
    padding: .5rem;
}
.search-form input[type="text"] {
    padding: .2rem;
    border: none; 
}
.search-form button[type="submit"] {
    padding: .5rem;
    border: none;
    background: #e7c88f;
    
}
.mid-container {
    grid-area: meio;
    background: url(imgs/mako2.png);
    background-position: right;
    background-repeat: no-repeat;
    background-color: #fff4e3;

}
.text-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 50ch;
}


/* Queries */
@media only screen and (max-width:860px) {
    .header-container {
        grid-template-areas: 
            "left left";
    }
    .rightx {
        display: none;
    }
    .leftz {
        background-position: 50% 30%;
    }
}
    </style>
</head>
<body>
    <div class="grid-container">
       <!-- Parte do topo -->
        <div class="header-container">
           <!-- Parte esq do header -->
            <div class="leftz">
                <div class="logo-text">
                  <h1><span class="japword">た</span></h1>
                   <div>
                    <h1>/A/nime</h1>
                    <p class="pointrem">私たちを捕まえる</p> 
                   </div> 
                </div>
                <!-- Menu falho que n tentei direito com CSS -->
                <div class="hidden-search">
                <i class="fas fa-bars"></i>
                <div class="responsive-menu">
                 <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Animes</a></li>
                    <li><a href="#">Reviews</a></li>
                 </ul>
                </div>
                </div>
            </div>
            <!-- Parte dir do header -->
           <div class="rightx">
                <div> <!-- Menu -->
                   <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Animes</a></li>
                    <li><a href="#">Reviews</a></li>
                   </ul>
                </div>
                <div> <!-- Searh bar -->
                <form class="search-form">
                 <input type="text" placeholder="Find something new...">
                 <button type="submit"><i class="fa fa-search"></i></button>
                </form> 
                </div>  
            </div>
            </div>
            <!-- Começo do meio -->
            <div class="mid-container">
                <div class="mid-texts">
                <div class="text-container">
                    <p>ACTION, ADVENTURE</p>
            <h1>NEW KILL LA KILL EPISODES</h1>
            <p>The team that brought you Gurren lagann and panty &amp; Stocking reunited to present what is looking to be one of the most over the top action series in a long time!</p>
                </div>
            
                </div>
                
                
            </div>
     </div>
</body>
</html>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .