0

CSS Tengo un boton que tiene un texto bastante largo:

introducir la descripción de la imagen aquí

Cuando la pantalla cambia de tamaño (se hace mas pequeña), oculta parte del texto:

introducir la descripción de la imagen aquí

La idea es que se vaya ajustando al ancho y se despliegue en varias lineas (las que necesite) sin ocultarse nada del texto, no se si me explico bien. He probado varias propiedades CSS sin éxito, agradecería un poco de ayuda. Gracias

He probado con la propiedad CSS:

  • word-wrap: normal | break-word | initial | inherit;
  • display: inline | block | flex | inline-block | inline-flex | initial | inherit
  • overflow-x: visible|hidden|scroll|auto|initial|inherit

El texto lo inserto mediante jquery:

var texto = l.BTN_TEC;
texto += "<br /><h6 style='color: red; margin: 0;'> " + l.TEXT_BTN_TEC + "</h6>";
$("#showTecnicosBtn").html(texto);
1

2 respuestas 2

1

Te dejo un ejemplo que puedes copiar para que veas con que propiedad css solucionas tu problema:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
#b1{
    white-space: normal;
}
</style>
</head>
<body>
<button id='b1'>
    <p>Este es un texto largo que puede estar dentro del botón</p>
</button>
</body>
</html>

En cuanto al tamaño del botón si deseas utilizas el framework Bootstrap para apoyarte en cuanto a responsive para que tu botón adopte diferentes tamaños en cuanto a distintas resoluciones de dispositivos.

2
  • Gracias compañero!! Eso es lo que buscaba
    – tripossi
    Commented el 16 oct. 2017 a las 15:31
  • De nada!! Aquí estamos para ayudar
    – Asney
    Commented el 16 oct. 2017 a las 15:33
1

Trata esto,

Bueno no conozco tu manera de escribir tu hoja de estilo pero me atrevo a responder esta pregunta y espero que te funcione

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">

    @media(max-width:960px){
        .content {  
            width: 960px;
        }
    }

    @media(max-width:860px){
            .content {  
            width: 860px;
        }
    }

    .content {
        margin: 0 auto;
        text-align: center;

    }
</style>
</head>
<body>
    <div style="float: left;width: 100%;">
        <div class="content">
            <p>Show Techs</p>

            <p>Clearly print your name below ONLY if you have reviewthe information above and understand:</p>
            <p>1) The scope oif work</p>
            <p>2) The hazards to which you will be exposed and</p>
            <p>3) Te mitigations for those hazads</p>
        </div>
    </div>
</body>
</html>

Solo usa los media para cada ajuste de pantalla, espero que te funcione

1
  • Gracias por la ayuda, pero lo he solucionado con el comentario de arriba.
    – tripossi
    Commented el 16 oct. 2017 a las 15:47

Tu Respuesta

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

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