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

Question

Me acabo de dar 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 de CSS no hacen más que agregar bordes y modificar el relleno. Si añado word-wrap: break-palabra a este botón, se envuelve la siguiente manera:

Roos Sturingen/Sen 
sors 

Y yo no quiero que corte en el medio de una palabra, si es posible cortarlo fuera entre palabras.

Gracias

Answer 1

He descubierto que se puede hacer uso de la propiedad CSS white-space:

white-space: normal; 

y va a romper las palabras como texto normal.

Espero que ayude.

Answer 2

botones de líneas múltiples, como que en realidad no son triviales de implementar. This page tiene una discusión interesante (aunque algo anticuada) sobre el tema. Su mejor opción probablemente sea abandonar el requisito de varias líneas o crear un botón personalizado usando, por ejemplo, div sy CSS, y agrega algo de JavaScript para que funcione como un botón.

Answer 3

Puede forzarlo (navegador lo permite, me imagino) insertando saltos de línea en el código HTML, como esto:

<INPUT value="Line 1 
Line 2"> 

Por supuesto la elaboración de dónde colocar los saltos de línea no es necesariamente trivial .. .

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

Answer 4

he encontrado que un botón de obras, sino que querrá agregar style="height: 100%;" al botón para que se mostrará más de la primera línea de Safari para iPhone iOS 5.1.1

Answer 5

word-wrap: break-word; 

trabajado para mi.

Answer 6

Si tenemos algunas divisiones internas dentro <button> etiqueta como esto:

<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 texto de la clase A obtener solapamiento en los datos de Clase 1 ya que estos son los dos en una sola etiqueta botón. que tratan de romper el tex using-

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

pero esto no será trabajado entonces trato esto-

white-space: normal; 

después de la eliminación por encima de las propiedades CSS y terminé mi tarea.

Espero que funcione para todos !!!

Answer 7

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

mina funciona tanto con