3

De la siguiente imagen:

introducir la descripción de la imagen aquí

¿Cómo le puedo hacer para que las letras no se salgan del slider que los contiene? Este es el código html que lo contiene:

<div  class="tp-caption font-weight-extra-bold text-color-light negative-ls-2 ws-nowrap"
                     data-frames=\'[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]\'
                     data-x="center"
                     data-y="center" data-voffset="[\'-60\',\'-60\',\'-60\',\'-85\']"
                     data-fontsize="[\'50\',\'50\',\'50\',\'90\']"
                     data-lineheight="[\'55\',\'55\',\'55\',\'95\']"
                     data-letterspacing="0">'.$compromiso['vCompromiso'].'
                </div>

Cabe destacar, que estoy usando el plugin de revolution slider y no directamente boostrap.

3
  • 1
    Utilizas Bootstrap? Si es así podés agregarle las clases col-sm-12 col-md-12 de acuerdo como lo explica en la página oficinal Commented el 22 ago. 2019 a las 19:58
  • 1
    Si utilizo boostrap, pero no funciona agregándole la clase mencionada. Commented el 22 ago. 2019 a las 20:12
  • Como dicen arriba puedes solucionarlo con las clases col-sm , col-md si es que utilizas Bootstrap. Te dejo un link con ejemplos simples para que puedas aplicar. getbootstrap.com/docs/3.3/examples/grid Commented el 23 dic. 2019 a las 17:50

1 respuesta 1

1

Puedes ponerle a todo el contenedor un width fijo, que lo acote al, por ejemplo, 100% de la pantalla, añadir padding al texto para que coja algo de aire y no se vaya hasta los bordes y además añadirle un white-space: normal para que cuando el texto ocupe el espacio que le has delimitado automáticamente salte de línea respetando las proporciones. Esto es un ejemplo:

  .claseContendor{width:100%; /*o tmabién puedes probar si te funciona mejor 'width:100vw'*/}
  .claseTexto{padding: 3em; white-space:normal;}

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.