Tengo un botón que tiene una descripción (estos se cargan dinámicamente) que es demasiado larga para el pozo en el que se encuentra.

Ejemplo:

Ejemplo de bienestar demasiado grande.

Me gustaría que se quedara en la clase = "bien" (col-md-2) en la que lo puse.

Entonces, por ejemplo, me gustaría usar puntos suspensivos (o simplemente cortar caracteres) si es demasiado largo para permanecer dentro de la clase = "bien" (col-md- *) en el que está.

Ejemplo si el texto completo es

[Esta es la descripción del botón].

Mostraría lo siguiente si es demasiado largo para el col-md- * en el que está.

[Esta es la descri ...]

Encontré este código para ocultar el desbordamiento, pero parece que no funciona. ¿Alguna sugerencia?

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}

Ejemplo de CodePen

http://codepen.io/anon/pen/WGNgNG

0
Kevin Vasko 2 sep. 2016 a las 21:00

2 respuestas

La mejor respuesta

Espero que esto resuelva tu problema

<div class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <div class="well well-lg">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               This is some really really really really long text<span class="caret"></span>
               </button>
                <ul class="dropdown-menu">
                    <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                  <li><a href="#">some button</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Y este será tu css

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

enter image description here

1
Aravind 2 sep. 2016 a las 20:36

Prueba esto

.btn-group{
display:block;
}

.well-lg{
 overflow:hidden;
}

Aquí está el resultado de mi lado. http://jmp.sh/HOownK5

1
rmarif 2 sep. 2016 a las 18:37