pagina - crear botones en html y css

Cómo ajustar el texto del botón html con ancho fijo

Question

Me di cuenta de que si le das a un botón html un ancho fijo, el texto dentro del botón nunca se ajusta. Lo he intentado con el ajuste de palabras, pero ese recorte de la palabra a pesar de que hay espacios disponibles para envolver.

¿Cómo puedo hacer que el texto de un botón html con un ancho fijo como lo haría cualquier tabla?

<td class="category_column">
    <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" 
           value="Roos Sturingen / Sensors" 
           id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" 
           class="outset" 
           style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;" />
</td>

las clases CSS no hacen más que agregar bordes y modificar el relleno. Si agrego word-wrap: break-word a este botón, lo ajustará de esta manera:

Roos Sturingen / Sen
sors

Y no quiero que se corte en medio de una palabra si es posible cortarlo entre palabras.

Gracias

Answer 1

1. espacio en blanco: normal;

2. word-wrap: palabra de ruptura;

   "Ambos" funcionó para mí.

Answer 2

Descubrí que puede hacer uso de la propiedad css de espacio en blanco:

white-space: normal;

Y romperá las palabras como texto normal.

Espero eso ayude.

Answer 3

He encontrado que un botón funciona, pero que querrá agregar style="height: 100%;" al botón para que muestre más que la primera línea en Safari para iPhone iOS 5.1.1

Answer 4

Los botones multilínea como ese no son realmente triviales de implementar. Esta página tiene una discusión interesante (aunque algo anticuada) sobre el tema. Su mejor opción sería, o bien abandonar el requisito de varias líneas o crear un botón personalizado utilizando, por ejemplo, div y CSS, y agregar algo de JavaScript para que funcione como un botón.

Answer 5

Puedes forzarlo (si el navegador lo permite, imagino) insertando saltos de línea en el código fuente HTML, como este:

<INPUT value="Line 1
Line 2">

Por supuesto, averiguar dónde colocar los saltos de línea no es necesariamente trivial ...

Si puede usar un <BUTTON> HTML en lugar de un <INPUT> , de modo que la etiqueta del botón sea el contenido del elemento en lugar de su atributo de value , colocando ese contenido dentro de un <SPAN> con un atributo de width que es unos pocos píxeles más estrecho que la del botón parece hacer el truco (incluso en IE6 :-).

Answer 6

Si tenemos algunas divisiones internas dentro de la etiqueta <button> como esta-

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

En algún momento, el texto de la clase A se superpone en los datos de clase 1 porque ambos están en una sola etiqueta de botón. Intento romper el tex usando-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

Pero esto no funcionó, entonces intento esto-

white-space: normal;

después de eliminar las propiedades anteriores de css y completar mi tarea.

¡Espero funcionará para todos!

Answer 7

white-space: normal;
word-wrap: break-word;

El mío funciona con ambos

Answer 8

word-wrap: break-word;

trabajó para mi.