html - truncar - Cambie el texto del botón automáticamente cuando la pantalla cambie de tamaño con Bootstrap 3

truncar texto css

Question

Considera estos códigos:

HTML

<div class="col-xs-3 col-sm-3">
<button type="button" class="btn btn-default btn-md btn-block">
<i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

@media only screen and (max-width: 767px) {
button {
content: ''<i class="fa fa-plus"></i>'';
}
}

Si cambia el tamaño de la pantalla horizontalmente, en algún momento el texto saldrá del botón.

Quiero saber si es posible cambiar el texto del botón automáticamente cuando se cambia el tamaño de la pantalla horizontal. Algo como "+ Agregar nuevo elemento" solo a la señal más "+" en dispositivos pequeños.

Soy un pequeño novato con consultas de medios, así que creo que me estoy perdiendo algo o lo estoy haciendo mal.

¿Alguien me puede ayudar?

Hice este violín para eso.

Answer 1

Hice un violín mostrando y ocultando 2 botones diferentes que quizás no sea la mejor manera, pero bueno, funciona.

http://jsfiddle.net/xo9xkv05/

HTML

<div class="less">
<button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button>
</div>
<div class="more">
<button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

.less {
display:none;
}
@media (max-width: 300px) {
.less {
display:block;
}
.more {
display:none;
}
}

Answer 2

Prueba esta demostración funcional: JSFiddle .

Agregue una clase al texto del botón, configure la display:none cuando el tamaño de la pantalla sea lo suficientemente pequeño:

<button type="button" class="btn btn-default btn-md btn-block">
<i class="fa fa-plus"></i>
<span class="button-text">Add New Item</span>
</button>

Y CSS:

@media screen and (max-width: 300px) {
.button-text {
display: none;
}
}

Sugerencia: nunca ponga la estructura DOM o la información dentro de los estilos CSS. Es difícil de mantener

Answer 3

Puede hacer esto sin agregar consultas de medios adicionales o CSS mediante el uso de las utilidades de respuesta integradas dentro de Bootstrap:

<div class="col-xs-3 col-sm-3">
<button type="button" class="btn btn-default btn-md btn-block">
<i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button>
</div>

Agrega un poco más de marcado HTML, pero los datos adicionales van en el HTML o en el CSS, por lo que el que mejor funcione para usted.

Answer 4

Simplemente crea otra consulta de medios (en el punto donde crees que el texto debería cambiar) y oculta el texto dentro del botón. En lugar de colocar el botón donde está ahora, encapsularlo en un <span> , luego escriba algo de CSS para configurar la display en none una vez que la página se vuelva más pequeña que x píxeles.

HTML

<div class="col-xs-3 col-sm-3">
<button type="button" class="btn btn-default btn-md btn-block">
<i class="fa fa-plus"></i><span>Add New Item</span></button>
</div>

CSS

@media only screen and (max-width: <change this value>) {
button span {
display: none;
}
}

Sin embargo, creo que esto debería resolverse con jQuery ya que no hay forma de garantizar que esto funcionará si coloca el botón en otros lugares. Debería intentar ver si el contenido del botón es más ancho que el ancho del botón, y luego agregar una clase ''invisible'' según corresponda.

Modifiqué un poco tu jsfiddle, sin embargo, jQuery parece tener errores en este caso (prueba a imprimir los valores que estoy usando en la función)

https://jsfiddle.net/ogt84jds/1/

Answer 5

Si usas Bootstrap, entonces es tan simple como escabullirse en dos clases.

hidden-sm y hidden-xs ocultan el elemento cuando el ancho de la pantalla es mediano o pequeño, respectivamente.

Así que, simplemente, si quieres estar oculto cuando la pantalla es pequeña, ¡simplemente aplica esas clases!

Ejemplo:

<button class="btn btn-primary">
<span class="glyphicon glyphicon-person"></span>
<span class="hidden-xs hidden-sm">Profile</span>
</button>