css - texto - text-overflow
¿Cómo evitar que palabras largas rompan mi div? (26)
Desde que se cambió de TABLE-layout a DIV-layout, sigue habiendo un problema común:
PROBLEMA : llenas tu DIV con texto dinámico e, inevitablemente, hay una palabra súper larga que se extiende por el borde de tu columna div y hace que tu sitio parezca poco profesional.
RETRO-WHINING : Esto nunca sucedió con diseños de tablas. Una celda de tabla siempre se ampliará al ancho de la palabra más larga.
GRAVEDAD : Veo este problema incluso en los sitios más importantes, especialmente en sitios alemanes donde incluso palabras comunes como "límite de velocidad" son muy largas ("Geschwindigkeitsbegrenzung").
¿Alguien tiene una solución viable para esto?
El HINFENADOR es la respuesta correcta (dada anteriormente). El verdadero problema detrás de su pregunta es que los navegadores web aún (en 2008) son extremadamente primitivos y no tienen una característica de separación de sílabas. Mira, todavía estamos en los comienzos del uso de la computadora, tenemos que ser pacientes. Mientras los diseñadores dominen el mundo de la web, tendremos dificultades para esperar algunas funciones nuevas y útiles.
ACTUALIZACIÓN: a partir de diciembre de 2011, ahora tenemos otra opción, con el apoyo emergente de estas etiquetas en FF y Safari:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Hice algunas pruebas básicas y parece funcionar en una versión reciente de Mobile Safari y Safari 5.1.1.
Tabla de compatibilidad: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
Guión suave
Puede indicar a los navegadores dónde dividir palabras largas al insertar un guión suave ( ­ ):
averyvery­longword
puede ser renderizado como
averyverylongword
o
averyvery-
espada larga
Una buena expresión regular puede asegurar que no los insertes a menos que sea necesario:
/([^/s-]{5})([^/s-]{5})/ → $1­$2
Los navegadores y los motores de búsqueda son lo suficientemente inteligentes como para ignorar este personaje al buscar texto, y Chrome y Firefox (que no han probado otros) lo ignoran cuando copian texto en el portapapeles.
elemento <wbr>
Otra opción es inyectar <wbr> , un antiguo IE-ism , que ahora está en HTML5 :
averyvery<wbr>longword
Descansos sin guión:
averyvery
espada larga
Puede lograr lo mismo con el carácter de espacio de ancho cero ​ (o ​ ).
FYI también hay hyphens: auto CSS hyphens: auto soportados por los últimos IE, Firefox y Safari ( pero actualmente no Chrome ):
div.breaking {
hyphens: auto;
}
Sin embargo, esa separación silábica se basa en un diccionario de división de palabras y no se garantiza que rompa palabras largas. Sin embargo, puede hacer que el texto justificado sea más bonito.
Solución retro-quejica
<table> para el diseño es malo, pero display:table en otros elementos está bien. Será tan extravagante (y elástico) como las tablas de la vieja escuela:
div.breaking {
display: table-cell;
}
overflow y white-space: pre-wrap respuestas white-space: pre-wrap continuación también son buenas.
"word-wrap: break-word" funciona en Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/
¿Quiere decir que, en los navegadores que lo soportan, word-wrap: break-word no funciona?
Si se incluye en la definición del cuerpo de la hoja de estilo , debería funcionar en todo el documento.
Si el desbordamiento no es una buena solución, solo un javascript personalizado podría romper artificialmente la palabra larga.
Nota: también está esta etiqueta <wbr> Word Break . Esto le da al navegador un lugar donde puede dividir la alineación. Desafortunadamente, la etiqueta <wbr> no funciona en todos los navegadores, solo Firefox e Internet Explorer (y Opera con un truco de CSS).
Acabo de hyphenator del hyphenator de esta pregunta . Eso podría resolver el problema.
Acabo de comprobar IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows y Safari:
word-wrap: break-word;
funciona para enlaces largos dentro de un div con un ancho establecido y sin desbordamiento declarado en el CSS:
#consumeralerts_leftcol{
float:left;
width: 250px;
margin-bottom:10px;
word-wrap: break-word;
}
No veo ningún problema de incompatibilidad
Agregue esto a css de su div: word-wrap: break-word;
Con respecto a la expresión regular en este comentario , es bueno, pero agrega el guión tímido solo entre grupos de 5 caracteres no en blanco o en guión. Eso permite que el último grupo sea mucho más largo de lo previsto, ya que no hay un grupo coincidente después de él.
Por ejemplo, esto:
''abcde12345678901234''.replace(/([^/s-]{5})([^/s-]{5})/g, ''$1­$2'')
... resultados en esto:
abcde­12345678901234
Aquí hay una versión que usa un lookahead positivo para evitar ese problema:
.replace(/([^/s-]{5})(?=[^/s-])/g, ''$1­'')
... con este resultado:
abcde­12345­67890­1234
Después de mucha lucha, esto es lo que funcionó para mí:
.pre {
font-weight: 500;
font-family: Courier New, monospace;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Funciona en las últimas versiones de Chrome, Firefox y Opera.
Tenga en cuenta que excluí muchas de las propiedades de white-space sugirieron los demás, que en realidad me rompieron la sangría.
Dos correcciones:
-
overflow:scroll: esto asegura que su contenido se vea a expensas del diseño (las barras de desplazamiento son feas) -
overflow:hidden: simplemente corta cualquier desbordamiento. Esto significa que las personas no pueden leer el contenido sin embargo.
Si (en el ejemplo SO) desea detener la superposición del relleno, probablemente tenga que crear otro div, dentro del relleno, para contener su contenido.
Editar: como dicen las otras respuestas, hay una variedad de métodos para truncar las palabras, ya sea resolviendo el ancho de procesamiento en el lado del cliente (nunca intente hacer esto desde el lado del servidor ya que nunca funcionará confiablemente, cruzando la plataforma) JS e insertando caracteres break, o usando etiquetas CSS no estándar y / o salvajemente incompatibles ( word-wrap: break-word no parece funcionar en Firefox ).
Sin embargo, siempre necesitará un descriptor de desbordamiento. Si su div contiene otro tipo de contenido demasiado amplio (imagen, tabla, etc.), necesitará un desbordamiento para que no destruya el diseño / diseño.
Así que, por supuesto, utilice otro método (o una combinación de ellos), pero recuerde agregar desbordamiento también para que cubra todos los navegadores.
Editar 2 (para abordar su comentario a continuación):
Comience usando la propiedad de overflow CSS no es perfecto pero detiene el rompimiento de diseños. Aplicar overflow:hidden primero. Recuerde que el desbordamiento puede no romperse en el relleno, por lo que puede anidar div o usar un borde (lo que sea mejor para usted).
Esto ocultará contenido desbordado y, por lo tanto, puede perder significado. Podría usar una barra de desplazamiento (utilizando overflow:auto o overflow:scroll lugar de overflow:hidden ) pero, dependiendo de las dimensiones del div y de su diseño, es posible que esto no se vea o funcione bien.
Para solucionarlo, podemos usar JS para recuperar cosas y hacer alguna forma de truncamiento automático. Estaba a mitad de camino escribiendo un pseudo código para ti, pero se vuelve muy complicado a la mitad. Si necesita mostrar tanto como sea posible, eche un vistazo a hyphenator ( como se menciona a continuación ).
Solo tenga en cuenta que esto se produce a costa de las CPU del usuario. Podría ocasionar que las páginas tarden mucho tiempo en cargarse y / o cambiarse el tamaño.
Envoltura de palabras del navegador cruzado de CSS
.word_wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Este es un problema complejo, como sabemos, y no es compatible de manera común entre los navegadores. La mayoría de los navegadores no admiten esta característica de forma nativa en absoluto.
En algunos trabajos realizados con correos electrónicos HTML, donde se usaba el contenido del usuario, pero el script no está disponible (e incluso el CSS no es compatible), el siguiente fragmento de CSS en un contenedor alrededor de su bloque de contenido no espaciado debería ayudar al menos un poco:
.word-break {
/* The following styles prevent unbroken strings from breaking the layout */
width: 300px; /* set to whatever width you need */
overflow: auto;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
-moz-binding: url(''xbl.xml#wordwrap''); /* Firefox (using XBL) */
}
En el caso de los navegadores basados en Mozilla, el archivo XBL mencionado anteriormente contiene:
<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
More information on XBL:
http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference
Example of implementing the CSS ''word-wrap'' feature:
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
-->
<binding id="wordwrap" applyauthorstyles="false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
doWrap();
elem.addEventListener(''overflow'', doWrap, false);
function doWrap() {
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode()) {
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('''').join(String.fromCharCode(''8203''));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
Desafortunadamente, a Opera 8+ no parece gustarle ninguna de las soluciones anteriores, por lo que JavaScript tendrá que ser la solución para esos navegadores (como Mozilla / Firefox). Otra solución para varios navegadores (JavaScript) que incluye las ediciones posteriores de Opera. sería utilizar el guión de Hedger Wang que se encuentra aquí: http://www.hedgerwow.com/360/dhtml/css-word-break.html
Otros enlaces / pensamientos útiles:
Incoherente Babble »Blog Archive» Emulando el ajuste de palabras CSS para Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU] No se ajusta la palabra en Opera, se muestra bien en IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html
He escrito una función que funciona muy bien donde se inserta ­ x letras en la palabra para un buen salto de línea. Todas las respuestas aquí no son compatibles con todos los navegadores y dispositivos, pero esto funciona bien con PHP:
/**
* Add line-break to text x characters in
* @param string $text
* @param integer $characters_in
* @return string
*/
function line_break_text($text, $characters_in = 10) {
$split = explode('' '', $text);
if ( ! empty($split)) {
foreach ($split as $key => $var) {
if ( strlen($var) > $characters_in ) {
$split[$key] = substr_replace($var, ''­'', $characters_in, 0);
}
}
}
return implode('' '', $split);
}
La solución que suelo usar para este problema es establecer 2 reglas css diferentes para IE y otros navegadores:
word-wrap: break-word;
woks perfectos en IE, pero el ajuste de palabras no es una propiedad de CSS estándar. Es una propiedad específica de Microsoft y no funciona en Firefox.
Para Firefox, lo mejor que se puede hacer usando solo CSS es establecer la regla
overflow: hidden;
para el elemento que contiene el texto que desea envolver. No ajusta el texto, sino que oculta la parte del texto que supera el límite del contenedor . Puede ser una buena solución si no es esencial para mostrar todo el texto (es decir, si el texto está dentro de una etiqueta <a> )
Necesita establecer "table-layout: fixed" para que funcione el wrap-up de palabras
Para compatibilidad con IE 8+ use:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Véalo aquí http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Todo lo que tenía que hacer era aplicar esto al estilo del contenedor div con un ancho establecido.
Para mí en un div sin tamaño fijo y con contenido dinámico funcionó usando:
display:table;
word-break:break-all;
Sí, si es posible, establecer un ancho absoluto y overflow : auto configuración overflow : auto funciona bien.
Si tienes esto -
<style type="text/css">
.cell {
float: left;
width: 100px;
border: 1px solid;
line-height: 1em;
}
</style>
<div class="cell">TopLeft</div>
<div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell">TopRight</div>
<br/>
<div class="cell">BottomLeft</div>
<div class="cell">BottomMiddle</div>
<div class="cell">bottomRight</div>
simplemente cambie a un formato vertical con contenido div y use min-width en su CSS en lugar de ancho -
<style type="text/css">
.column {
float: left;
min-width: 100px;
}
.cell2 {
border: 1px solid;
line-height: 1em;
}
</style>
<div class="column">
<div class="cell2">TopLeft</div>
<div class="cell2">BottomLeft</div>
</div>
<div class="column">
<div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell2">BottomMiddle</div>
</div>
<div class="column">
<div class="cell2">TopRight</div>
<div class="cell2">bottomRight</div>
</div>
<br/>
Por supuesto, si está mostrando datos tabulares genuinos, está bien utilizar una tabla real, ya que es semánticamente correcta e informará a las personas que utilizan lectores de pantalla que se supone que están en una tabla. Los está utilizando para el diseño general o la división de imágenes por las que la gente lo linchará.
Tuve que hacer lo siguiente porque, si las propiedades no se declaraban en el orden correcto, se dividirían aleatoriamente palabras en el lugar incorrecto y sin agregar un guión.
-moz-white-space: pre-wrap;
white-space: pre-wrap;
hyphens: auto;
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Originalmente publicado por Enigmo: https://.com/a/14191114
Una función simple (requiere underscore.js) - basada en @porneL respuesta
String.prototype.shyBreakString = function(maxLength) {
var shystring = [];
_.each(this.split('' ''), function(word){
shystring.push(_.chop(word, maxLength).join(''­''));
});
return shystring.join('' '');
};
Use el estilo word-break:break-all; . Sé que funciona en las tablas.
después de toda la palabra "wraps and breaks", conserve su desbordamiento y vea si esto resuelve su problema. simplemente cambie la pantalla de su div a: display: inline;
Actualización: manejar esto en CSS es maravillosamente simple y de bajo costo, pero no tienes control sobre dónde ocurren los descansos cuando lo hacen. Eso está bien si no te importa, o tus datos tienen ejecuciones alfanuméricas largas sin interrupciones naturales. Tuvimos muchas rutas de archivos largas, URL y números de teléfono, todos los cuales tienen lugares en los que es mucho mejor romperse que otros.
Nuestra solución fue utilizar primero un reemplazo de expresiones regulares para poner un espacio de ancho cero (& # 8203;) después de cada 15 (por ejemplo) caracteres que no son espacios en blanco o uno de los caracteres especiales donde preferiríamos descansos. Luego hacemos otro reemplazo para poner un espacio de ancho cero después de esos caracteres especiales.
Los espacios de ancho cero son agradables, porque no siempre son visibles en la pantalla; Los guiones tímidos fueron confusos cuando se mostraron, porque los datos tienen guiones significativos. Los espacios de ancho cero tampoco se incluyen cuando copia texto del navegador.
Los caracteres especiales de corte que estamos utilizando actualmente son punto, barra inclinada, barra invertida, coma, guión bajo, @, | y guión. No pensarías que necesitarías hacer nada para alentar la ruptura después de los guiones, pero Firefox (3.6 y 4 al menos) no se rompe por sí solo en guiones rodeados de números (como números de teléfono).
También queríamos controlar la cantidad de caracteres entre pausas artificiales, según el espacio de disposición disponible. Eso significaba que la expresión regular para unir las largas ejecuciones sin interrupción debía ser dinámica. Esto se llama mucho, y no queríamos crear las mismas expresiones regulares idénticas una y otra vez por razones de rendimiento, así que usamos un caché de expresiones regulares simple, con la clave de la expresión de expresiones regulares y sus banderas.
Aquí está el código; probablemente nombre las funciones en un paquete de utilidad:
makeWrappable = function(str, position)
{
if (!str)
return '''';
position = position || 15; // default to breaking after 15 chars
// matches every requested number of chars that''s not whitespace or one of the special chars defined below
var longRunsRegex = cachedRegex(''([^//s//.////,_@//|-]{'' + position + ''})(?=[^//s//.////,_@//|-])'', ''g'');
return str
.replace(longRunsRegex, ''$1​'') // put a zero-width space every requested number of chars that''s not whitespace or a special char
.replace(makeWrappable.SPECIAL_CHARS_REGEX, ''$1​''); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([/.////,_@/|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen
cachedRegex = function(reString, reFlags)
{
var key = reString + (reFlags ? '':::'' + reFlags : '''');
if (!cachedRegex.cache[key])
cachedRegex.cache[key] = new RegExp(reString, reFlags);
return cachedRegex.cache[key];
};
cachedRegex.cache = {};
Prueba así:
makeWrappable(''12345678901234567890 12345678901234567890 1234567890/1234567890'')
Actualización 2: parece que los espacios de ancho cero, de hecho, se incluyen en el texto copiado en al menos algunas circunstancias, simplemente no se pueden ver. Obviamente, alentar a las personas a copiar texto con caracteres ocultos en él es una invitación a tener datos como ese ingresados en otros programas o sistemas, incluso el suyo, donde puede causar problemas. Por ejemplo, si termina en una base de datos, las búsquedas en su contra pueden fallar, y las cadenas de búsqueda como esta también pueden fallar. Usar las teclas de flecha para moverse a través de datos como este requiere (correctamente) una presión de tecla adicional para moverse a través del personaje que no se puede ver, un tanto extraño para los usuarios si lo notan.
En un sistema cerrado, puede filtrar ese carácter en la entrada para protegerse, pero eso no ayuda a otros programas y sistemas.
Dicho todo esto, esta técnica funciona bien, pero no estoy seguro de cuál sería la mejor elección del personaje que causa los rompimientos.
Actualización 3: Hacer que este personaje termine en datos ya no es una posibilidad teórica, es un problema observado. Los usuarios envían los datos copiados de la pantalla, se guardan en la base de datos, las búsquedas se rompen, las cosas se ordenan de forma extraña, etc.
Hicimos dos cosas:
- Escribió una utilidad para eliminarlos de todas las columnas de todas las tablas en todas las fuentes de datos para esta aplicación.
- Se agregó filtrado para eliminarlo en nuestro procesador de entrada de cadena estándar, por lo que desaparecerá cuando el código lo vea.
Esto funciona bien, al igual que la técnica en sí, pero es una historia de advertencia.
Actualización 4: estamos usando esto en un contexto donde los datos alimentados pueden ser escapes de HTML. Bajo las circunstancias correctas, puede insertar espacios de ancho cero en el centro de las entidades HTML, con resultados funky.
La solución consistía en agregar el signo & a la lista de caracteres que no se rompen, como esta:
var longRunsRegex = cachedRegex(''([^&//s//.////,_@//|-]{'' + position + ''})(?=[^&//s//.////,_@//|-])'', ''g'');
Utilizar esta
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
p {
overflow-wrap: break-word;
}
@-moz-document url-prefix() {
p {
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
}