3

tengo un pequeño inconveniente. Cabe destacar que tengo las librerías de js, jquery, bootstrap y todas las necesarias, en mi html.

Al intentar escribir dentro de un alert se sale el contenido, y no es lo que quiero, quiero que se vaya llenando y que el espacio del alert, ocupe la cantidad de letras o palabras que tenga, y no logro hacer que sea posible. ¿Alguna ayuda?

Bueno, tengo el siguiente código a continuación:

<body> 
        <nav class="col-sm-12 navbar navbar-expand-sm bg-dark">
                <form class="form-inline">
                    <div class="input-group">
                        <span class="input-group-text">@</span>
                        <input type="text" class="form control" id="username" name="username" placeholder="Username...">
                    </div>
                </form>
        </nav>
        <br>
    <div class="container">
        <div class="row justify-content-between">

            <div class="col-sm-4 ">
                <div class="alert alert-primary">
                    <strong>
                        alert-primarysadasdasdasdasdasd
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>

            <div class="col-sm-4 ">
                <div class="alert alert-secondary">
                    <strong>
                        alert-secondary
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>

            <div class="col-sm-4 ">
                <div class="alert alert-success">
                    <strong>
                        alert-success
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
        </div>


        <div class="row justify-content-between">
            <div class="col-sm-4">
                <div class="alert alert-danger">
                    <strong>
                        alert-danger
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col alert alert-warning">
                    <strong>
                        alert-warning
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="alert alert-info">
                    <strong>
                        alert-info
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
        </div>


        <div class="row justify-content-between">
            <div class="col-sm-6">
                <div class="alert alert-light">
                    <strong>
                        alert-light
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="alert alert-dark ">
                    <strong>
                        alert-dark
                    </strong>
                    <span>
                        Prueba de componente
                    </span>
                </div>
            </div>
        </div>
    </div>

Lo cual me genera algo así: introducir la descripción de la imagen aquí

Y así es como se ve, el contenido fuera del alert:

introducir la descripción de la imagen aquí

2
  • Trata con esto en cada contenedor word-wrap: break-word;
    – BetaM
    el 10 may. 2020 a las 18:33
  • Perfecto, muchas gracias. Si funciona. @BetaM
    – Dabydat
    el 10 may. 2020 a las 18:35

1 respuesta 1

3

Para romper la continuidad del texto y evitar se salga de su contenedor Aplica a dicha etiqueta está regla css

etiqueta{
     word-wrap: break-word;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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