¿Es posible habilitar la partición automática en HTML / CSS?

Mi cliente ha solicitado habilitar la partición automática en esta página: http://carlosdinizart.com/biography / , y me di cuenta de que nunca lo había visto en una página web.

¿Es posible configurar la partición automática en un documento HTML con solo HTML/CSS? Si no, ¿cuáles son las opciones?

Author: ROMANIA_engineer, 2012-01-20
Source

4 answers

CSS3 proporciona cierto soporte para esto. Fuente: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements / Puede consultar la documentación del w3c aquí: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3 añade seis propiedades a la lista de cosas útiles. Estos son:

  • El más importante es hyphens.
  • Puede agregar archivos de diccionario con hyphenate-resource para que el navegador tenga una mejor oportunidad de renderizar su texto con la derecha silábica.
  • hyphenate-before establece un número mínimo de caracteres antes de la partición.
  • hyphenate-after hace lo mismo que hyphenate-before pero para los caracteres después de la partición.
  • hyphenate-lines define cuántas líneas se escribe como máximo una palabra con guion. con hyphenate-character puede especificar qué entidad HTML debe usarse, por ejemplo, \2010.

La propiedad principal de esta pila es hyphens. Acepta uno de los tres valores: none, manual o auto. El predeterminado es manual, donde puede establece guiones a través de ­. auto es el mejor para el texto continuo, mientras que las palabras se dividen si es posible y disponible. Y none no tiene guiones en absoluto, incluso si hay un conjunto de caracteres para un posible salto de línea en una palabra determinada.

Actualización:

Información de soporte del navegador aquí: http://caniuse.com/css-hyphens

 38
Author: Ninja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-09 17:19:58

Una opción es insertar guiones suaves en el texto en los lugares donde puede ser roto. El guion suave está representado por la entidad ­ en HTML. Puede encontrar bibliotecas / herramientas que pueden preparar texto automáticamente con ­s en los lugares correctos, de lo contrario tendrá que hacerlo manualmente.

 12
Author: deceze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-20 06:49:49

Para tratar con una página que tiene un ancho fijo para el texto, el movimiento práctico sería agregar un par de caracteres de GUION SUAVE (U+00AD), utilizando la referencia de entidad ­ si lo encuentra más cómodo que ingresar el carácter (invisible) en sí. Puede averiguar rápidamente qué palabras deben tener guiones para producir un buen resultado.

En un caso más complejo (varias páginas, ancho flexible), use un preprocesador, o código del lado del servidor, o código del lado del cliente que agregue guiones suaves. El enfoque del lado del cliente es más simple y se puede aplicar independientemente de las tecnologías del lado del servidor y las herramientas de creación. Tenga en cuenta que la partición automática puede fallar y necesita ayuda: el idioma(s) del texto debe indicarse en el marcado (o de lo contrario, dependiendo de la biblioteca utilizada).

Como mínimo, podrías poner los atributos lang=en class=hyphenate en la etiqueta <body> y el siguiente código en la parte head: 

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

Demo: http://bytelevelbooks.com/code/javascript/hyphenation.html (flexible-width text, con solo el ancho máximo establecido, para que pueda probarlo variando el ancho de la ventana del navegador).

 9
Author: Jukka K. Korpela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-27 17:23:03

En la actualidad mi css para <p> es

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}

Esto no funciona para Chrome 39 en Mac. Conocido por no trabajar en la Ópera. Funciona para Firefox, iOS Safari.

Esto NO es infalible: Las columnas estrechas (menos de 6 palabras) son feas, pero en general hace que el diseño se parezca mucho más al tipo establecido correctamente.

 3
Author: Sherwood Botsford,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-01 17:15:19