1

estoy tratando de hacer una pagina de inicio con dos bloques de opciones el cual puede ir a dos lugares distintos de la pagina, lo que pasa es que para un tema de diseño he agrandado la letra a tope, pero tengo el problema que no me ajusta el texto al contenedor cuando hago responsive y no se como hacerlo, deje el codigo por si quisieran ayudarme.

<div class="bimenu">
        <div class="menu-graphic"><div>Graphic</div></div>
        <div class="menu-design">Design</div>
    </div>

css

.bimenu{
    width: 100%;
    height: 100vh;
    background:#000;
    posicion:fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Ubuntu;
    color:white;
    font-weight: 700;
    font-size: 90px;
}

.menu-graphic{
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:red;
}

.menu-design{
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:blue;
}

y esto es como me sale:

Necesito que al hacer el responsive no me corte el texto sino que se ajuste por ejemplo que arriba diga Gra y abajo phic o como sea

Necesito que al hacer el responsive no me corte el texto sino que se ajuste por ejemplo que arriba diga Gra y abajo phic o como sea

3 respuestas 3

1

la pagina:

<div class="bimenu">
                <div class="menu-graphic">
                    <div className="text">Graphic</div>
                    </div>
                <div class="menu-design">Design</div>
            </div>

el .css:

.text{
    float: right;
    display: flex;
    align-items: center;
    word-break:break-all;
    margin: 0 0 1em 1em;
}
1

Ya lo encontré chicos:

     .menu-graphic{
        width: 50%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background:red;
    word-break:break-all;

}

Le puse la propiedad word-break: break-all

0

Se puede usar white-space. La propiedad CSS de white-space establece cómo se maneja el espacio en blanco dentro de un elemento. Para ver más aqui: white-space

div {
  max-width: 100px;
  width: 100px;
  white-space: break-word;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum numquam quas odit maiores corrupti, quo amet, exercitationem error veniam tempore voluptates nisi sequi. Eveniet tempora officiis pariatur ab provident rerum.
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.