Cómo romper la palabra después de un carácter especial como guiones (-) -- html campo con css campo con text camp Relacionados El problema

How to break word after special character like Hyphens (-)


76
vote

problema

Español

Dado un CSS relativamente simple:

  div {    width: 150px;  }  
  <div>    12333-2333-233-23339392-332332323  </div>  

¿Cómo lo hago para que la cadena permanezca limitada al width de 150 , y envuelve a una nueva línea en el guión ?

Original en ingles

Given a relatively simple CSS:

div {    width: 150px;  }
<div>    12333-2333-233-23339392-332332323  </div>

How do I make it so that the string stays constrained to the width of 150, and wraps to a new line on the hyphen?

</div
        
       
       

Lista de respuestas

72
 
vote
vote
La mejor respuesta
 

Reemplace sus guiones con esto:

  &shy;   

Se llama un guión "suave".

  div {    width: 150px;  }  
  <div>    12333&shy;2333&shy;233&shy;23339392&shy;332332323  </div>  
 

Replace your hyphens with this:

&shy; 

It's called a "soft" hyphen.

div {    width: 150px;  }
<div>    12333&shy;2333&shy;233&shy;23339392&shy;332332323  </div>
</div
 
 
   
   
32
 
vote

en todos los navegadores modernos * (y en algunos navegadores mayores , también), el <wbr> Element es La herramienta perfecta para brindar la oportunidad de romper palabras largas en puntos específicos.

para citar de ese enlace:

El elemento HTML de la oportunidad (código> <wbr> ) representa una posición dentro del texto donde el navegador puede romper opcionalmente una línea, aunque sus reglas de línea de salida no crearían un descanso en esa ubicación. < / p>

Así es como se podría usar en el ejemplo de OP (o verlo en acción en jsfiddle ):

  <div style="width: 150px;">   12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div>   

* Lo he probado en IE9, IE10, y las últimas versiones de Chrome, Firefox y Opera, y Safari.

  div {    width: 150px;  }  
  <div>    12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323  </div>   
 

In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.

To quote from that link:

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Here's how it could be used to in the OP's example (or see it in action at JSFiddle):

<div style="width: 150px;">   12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div> 

*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.

div {    width: 150px;  }
<div>    12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323  </div>
</div
 
 
17
 
vote

Como parte de CSS3, aún no es totalmente compatible, pero puede encontrar información sobre Word -Envapeando aquí . Otra opción es la etiqueta wbr, y amp; tímido;, y y amp; # 8203; ninguna de los cuales se apoyan completamente.

 

As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, &shy;, and &#8203; none of which are fully supported either.

</div
 
 
 
 
8
 
vote

Su ejemplo funciona como se espera en Google Chrome, Safari (Windows) y IE8. El texto se rompe fuera de la caja 150px en Firefox 3 y Opera 9.5.

Además, &shy; no funcionará para su ejemplo, ya que será:

  • trabaja cuando se rompe la palabra, pero cuando no se rompe la palabra, no muestre ningún guión, o

  • trabajo cuando no se rompe la palabra, pero muestra dos guiones cuando se rompe la palabra Dado que agrega un guión en un descanso.

 

Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.

Additionally &shy; won't work for your example, as it will either:

  • work when word-breaking but when not word-breaking not display any hyphens, or

  • work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.

</div
 
 
8
 
vote

En esta instancia específica (donde su cadena va a contener guiones), transformaría el texto a este lado del servidor:

  <div style="width:150px;">    <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>  </div>  
 

In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

<div style="width:150px;">    <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>  </div>
</div
 
 
 
 
7
 
vote

Dependiendo de lo que quiera ver exactamente, puede usar una combinación de hyphen , soft hyphen , y / o zero width space .

En un guión suave, su navegador puede romperse con la palabra (agregando un guión). En un espacio de ancho cero, su navegador puede romper la palabra (sin agregar nada).

Por lo tanto, si su código es algo así como:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

Luego, su navegador mostrará esto sin interrupciones de Word:

1111112222222-333333344444444-5555555

y esto será cada posible rotura de palabras:

111111-
222222-
-333333
444444-
555555

Solo levante la opción que necesita. En su caso, puede ser el entre 4s y 5s.

 

Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.

On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

Thus, if your code is something like :

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

then your browser will show this with no word-break :

1111112222222-33333334444444-5555555

and this will every possible word-break :

111111-
222222-
-333333
444444-
555555

Just pick up the option you need. In your case, it may be the one between 4s and 5s.

</div
 
 
   
   
2
 
vote

También puedes usar:

  word-break:break-all;   

ex.

  <div style='width:10px'>ababababababbabaabababababababbabababa</div>   

Salida:

  abababababa ababababbba abbabbababa ababb   

Rotura de palabras es romper toda la palabra o línea incluso si no hay espacio en la oración que no se disfraza en ancho o altura proporcionada. Tuerca para que deba proporcionar un ancho o altura.

 

You can also use :

word-break:break-all; 

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div> 

output:

abababababa ababababbba abbabbababa ababb 

word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.

</div
 
 
0
 
vote

El guión que no se rompe funciona bien.

entidad html (decimal)

  &#8209;   
 

The non-breaking hyphen works well.

HTML Entity (decimal)

&#8209; 
</div
 
 
0
 
vote

en lugar de - Puede usar &hyphen; o soft hyphen0 .

Además, asegúrese de que la propiedad hyphens css fuera no establecida en ninguno (el valor predeterminado es manual ).

soft hyphen1111 no es compatible con Internet Explorer .

 

Instead of - you can use &hyphen; or u2010.

Also, make sure the hyphens css property was not set to none (The default value is manual).

<wbr> is not supported by Internet Explorer.

</div
 
 
0
 
vote

Espero que esto pueda ayudar

Utilice la etiqueta soft hyphen2 (break) donde desea romper la línea.

 

Hope this may help

use <br>(break) tag where you want to break the line.

</div
 
 
0
 
vote

Puede usar 0 espacio de ancho después del carácter de guión:

  soft hyphen3  
  soft hyphen4  

Si desea romper la línea antes de usar el guión soft hyphen5 en su lugar.

 

You can use 0 width space after hyphen character:

div {    width: 150px;  }
<div>    12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323  </div>

if You want line break before hyphen use &#8203;- instead.

</div
 
 

Relacionados problema

2  Imprimiendo tanto la línea y las líneas coincidentes ± 1 sobre la coincidencia regex (1 linero)  ( Printing both the matched line and lines %c2%b11 upon regex match 1 liner ) 
¿Cómo puedo imprimir una línea emparejada, así como una línea antes y después de ella? Actualmente tengo: perl -lane 'print if $F[3] > 100000 && $F[2] =~ /...

1  Documento, formato de texto  ( Document text format ) 
Para mi proyecto, necesito editor de documentos para muchos tipos de documentos (datos tabulares, facturas, cartas, algunos formulares, ...) y estoy buscando ...

0  MySQL: Posible pérdida de datos UTF de la conversión de tipo de campo de caracteres de texto?  ( Mysql possible loss of utf data from char to text field type conversion ) 
Tengo una base de datos que utilizo para una aplicación web de Idioma / Vocabulario extranjero y se conectó con él a través de PhpMyAdmin (y, por supuesto, PH...

17  Cómo eliminar Acentos y Tilde en un C ++ Std :: String  ( How to remove accents and tilde in a c stdstring ) 
Tengo un problema con una cadena en C ++ que tiene varias palabras en español. Esto significa que tengo muchas palabras con acentos y tildes. Quiero reemplaza...

1  C #: ¿Qué debería ser la expresión regular para esto?  ( C what should the regular expression be for this ) 
Sé que hay muchos asn.1 analizador por ahí, pero cuestan bastante Lote y como tal, estoy tratando de escribir mi propia. Soy un poco nuevo para la expresi...

0  ActionScript 3, lee el texto del archivo en el tiempo de compilación?  ( Actionscript 3 read file text at compile time ) 
Hay alguna manera de hacer que el flash coloque el contenido de un archivo de texto en una cadena, o al menos lo ponga en el .swf, ¡así que el usuario no nece...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

8  ¿Use la tecla TAB-TABLE en un texto multilíneo archivado en SWT?  ( Use tab key on a multiline text filed in swt ) 
¿Cómo evito un campo de texto de múltiples líneas de las pulsaciones de teclas de pestaña "robar"? Me refiero: Me gustaría usar la pestaña en el ciclo entre...

0  Python Tkinter desplazando dos widgets de texto al mismo tiempo con las teclas de flecha  ( Python tkinter scrolling two text widgets at the same time with arrow keys ) 
Estoy construyendo una GUI que tiene 2 widgets de texto. (Quiero decir que tiene un montón de cosas, pero el bien de esta pregunta le permite dejarlo en 2 wid...

0  Inferencia de texto Android  ( Text invertion android ) 
cualquiera sabe cómo escribir texto al revés de la edición de texto en Android gracias / minhaz ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos