Al realizar el diseño DivCSS, debes controlar el texto. Hoy te lo presentaré sistemáticamente. Hay cuatro propiedades en CSS que controlan los saltos de línea.
1. espacio en blanco
Puede lograr el efecto de las etiquetas PRE en HTML y el efecto noWrap de las celdas.
gramática:
espacio en blanco: normal pre nowrap
Valor:
normal: valor predeterminado. Método de procesamiento predeterminado. El texto maneja automáticamente los saltos de línea. Si se alcanza el límite del contenedor, el contenido pasará a la siguiente línea
pre: Las nuevas líneas y otros espacios en blanco estarán protegidos. Este valor requiere IE6+ o !DOCTYPE declarado como compatible con el modo compatible con los estándares. Si la declaración !DOCTYPE no especifica el modo compatible con los estándares, se puede utilizar este atributo, pero no tendrá ningún efecto. El resultado es equivalente a lo normal. Ver pre objeto
nowrap: Fuerza que todo el texto se muestre en la misma línea hasta que se encuentre el final del texto o un objeto br. Ver atributo noWrap
ilustrar:
Establece o recupera cómo se manejan los caracteres de espacio dentro de un objeto.
Los caracteres de espacio en blanco, como nuevas líneas, espacios y TAB, se ignoran de forma predeterminada en los documentos HTML. Cuando esta propiedad se establece en normal o nowrap, puede usar la entidad nombrada sin espacio de ajuste para agregar espacios y el elemento br para agregar saltos de línea. Esta propiedad tiene el mismo efecto en el contenido que manipula utilizando el Modelo de objetos de documento (DOM) que en el contenido mostrado por IE.
Esta propiedad funciona en objetos de bloque.
Estilos relacionados:
desbordamiento de texto
Combinarlo con espacios en blanco elimina la necesidad de escribir un programa para determinar la longitud de una cadena. Haga clic aquí para ver un ejemplo.
gramática:
desbordamiento de texto: puntos suspensivos del clip
Valor:
clip: valor predeterminado. No muestra marcadores de omisión (…), sino simplemente cultivos
puntos suspensivos: muestra una marca de puntos suspensivos (...) cuando el texto dentro del objeto se desborda
ilustrar:
Establece o recupera si se debe utilizar una marca de puntos suspensivos (...) para marcar el desbordamiento de texto dentro del objeto.
Esta propiedad solo afecta el desbordamiento del texto occidental normal en la dirección horizontal en línea. El desbordamiento en línea ocurre cuando el texto dentro de una línea excede el ancho disponible sin oportunidad de ajustarse.
Para forzar que se produzca un desbordamiento y aplicar el valor de puntos suspensivos, el autor debe establecer la propiedad de espacio en blanco del objeto en nowrap.
Si no hay posibilidad de saltos de línea (por ejemplo, el ancho del contenedor del objeto es estrecho y hay un texto largo sin saltos de línea razonables), es posible desbordar sin aplicar nowrap.
Para que se aplique el valor de puntos suspensivos, esta propiedad debe establecerse en un objeto que tenga un área invisible. La mejor opción es establecer la propiedad de desbordamiento en oculta. Esta propiedad también se aplica cuando se configura la propiedad de desbordamiento en desplazamiento o auto. Pero aparecerán barras de desplazamiento.
Al seleccionar la marca de omisión, se puede seleccionar texto oculto. Cuando se produce la selección, la marca de puntos suspensivos se oculta y se reemplaza por texto.
Este atributo proporciona una forma eficaz de realizar marcado de omisiones en DHTML.
2. salto de palabra
La propiedad más comúnmente utilizada para controlar el ajuste de línea se usa a menudo en combinación con el ajuste de palabras a continuación.
gramática:
ruptura de palabra: ruptura normal, conservación de todo
Valor:
normal: valor predeterminado. Permitir saltos de línea entre palabras
break-all: este comportamiento es el mismo que el normal para los idiomas asiáticos. También se permiten saltos dentro de cualquier palabra de una línea de texto en un idioma no asiático. Este valor es adecuado para texto asiático que contiene texto no asiático.
keep-all: Igual que lo normal para todos los idiomas no asiáticos. En chino, coreano y japonés no se permiten saltos de palabras. Bueno para texto no asiático con una pequeña cantidad de texto asiático
ilustrar:
Establece o recupera el comportamiento de ajuste de palabras para el texto dentro de un objeto. Especialmente cuando aparecen varios idiomas.
Para los chinos, se debe utilizar el sistema break-all. [Cortar-Página]
3. ajuste de palabras
Si la página web que diseña no tiene un ancho adaptable, debe configurarla en palabra de corte; de lo contrario, la página puede quedar escalonada.
gramática:
ajuste de palabras: palabra de corte normal
Valor:
normal: valor predeterminado. Permitir que el contenido se extienda más allá de los límites del contenedor especificado
palabra de ruptura: el contenido se romperá dentro de los límites. Si es necesario, también se producirá un salto de palabra.
ilustrar:
Establece o recupera si se debe romper la línea cuando la línea actual excede el límite del contenedor especificado.
Esta propiedad solo funciona en objetos de diseño, como objetos de bloque. Para usar este atributo para elementos en línea, primero debe establecer el atributo de alto o ancho del objeto, o establecer el atributo de posición en absoluto, o establecer el atributo de visualización en bloque.
4. desbordamiento, desbordamiento-x, desbordamiento-y
Esto no controla estrictamente el estilo de ajuste de línea, pero configurarlo como oculto puede complementar las deficiencias del ajuste de palabras en ciertos momentos. Por ejemplo, desea mostrar solo una línea de texto dentro del ancho limitado, pero la longitud de esta línea. de texto excede este ancho, combinado con espacio en blanco + desbordamiento de texto puede lograr mejores resultados.
gramática:
desbordamiento: desplazamiento oculto automático visible
Valor:
visible: valor predeterminado. No corta contenido ni agrega barras de desplazamiento. Si este valor predeterminado se declara explícitamente, el objeto se recortará a las dimensiones de la ventana o marco que lo contiene. Y la configuración del atributo del clip no será válida
automático: el contenido del objeto se recortará o se mostrarán barras de desplazamiento cuando sea necesario
oculto: no mostrar contenido que exceda el tamaño del objeto
desplazamiento: muestra siempre las barras de desplazamiento
ilustrar:
Recupera o establece cómo se administra el contenido del objeto cuando excede su altura y ancho especificados.
El valor predeterminado para todos los objetos es visible, excepto para los objetos de área de texto y objetos de cuerpo, donde el valor predeterminado es automático. Establecer el valor de esta propiedad de un objeto de área de texto en oculto ocultará sus barras de desplazamiento.
Para las tablas, si el atributo de diseño de tabla está configurado como fijo, el objeto td admite el atributo de desbordamiento con un valor predeterminado de oculto. Si se configura en desplazamiento o automático, se cortará el contenido que exceda el tamaño td. Si se establece en visible, hará que el texto adicional se desborde hacia las celdas de la derecha o de la izquierda (dependiendo de la configuración de la propiedad de dirección).
Esta propiedad está disponible en plataformas MAC a partir de IE5.
A partir de IE6, este atributo se puede aplicar a objetos html cuando se especifica el modo compatible con los estándares mediante la declaración !DOCTYPE.