html - para - Cómo aplicar un estilo de continuación/continuación de línea y formato de código con css

etiquetas css

Question

Cuando se presenta texto preformateado en la web (por ejemplo, muestras de código), el ajuste de línea puede ser un problema. Desea ajustar la legibilidad sin desplazarse, pero también necesita que el usuario no tenga ambigüedades de que se trata de una sola línea sin salto de línea.

Por ejemplo, puede tener una línea de comando realmente larga para mostrar, como esta:

c:/Program Files/My Application/Module/bin/..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I''d like the text style to indicate that it has wrapped"

(Stackoverflow obliga a una línea como esta a no envolver).

¿Hay alguna manera de diseñar con CSS para dar el mismo tratamiento que se ve en los libros? es decir, para envolver la línea, pero incluir una imagen o un glifo que indique una continuación de línea.

Obviamente, estoy buscando un estilo que se pueda aplicar a todo el texto, y permita que el motor de renderizado XHTML / CSS del navegador descubra qué líneas se han envuelto y, por lo tanto, necesita el tratamiento especial.

La solución hasta ahora ...

Agregar glifos de continuación de línea

Gracias a Jack Ryan y Maarten Sander, tiene una solución razonablemente viable para agregar glifos de continuación a la izquierda o a la derecha de las líneas envueltas. Requiere una imagen con glifos repetidos en la vertical, que se compensa para que sea invisible si solo hay una línea desenrollada. El principal requisito de esta técnica es que cada línea debe estar dentro de un bloque (por ejemplo, p, span o div). Esto significa que no se puede usar fácilmente de forma manual con el texto existente que se encuentra en un prebloque.

El fragmento a continuación resume la técnica esencial. Publiqué un ejemplo en vivo aquí .

.wrap-cont-l {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-l p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */
  text-indent: -21px;
  padding-left: 14px;
  margin: 0 0 2px 7px;
}

.wrap-cont-r {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-r p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */
  text-indent: -28px;
  margin: 0 0 2px 28px;
  padding-right: 14px;
}

Para ser usado así:

<div class="wrap-cont-l">
  <p>take a long line</p>
  <p>take a long line</p>
</div>
<div class="wrap-cont-r">
  <p>take a long line</p>
  <p>reel him in</p>
</div>

¡Pero espera hay mas!

Recientemente descubrí la sintaxis más brillante de Alex Gorbatchev. Es una herramienta fantástica para formatear de forma dinámica y automática bloques de texto. Está destinado principalmente para el código de resaltado de sintaxis, pero podría utilizarse para cualquier texto. En v1.5.1, sin embargo, no envuelve las líneas (de hecho, les obliga a no envolver).

Aunque hice un poco de intrusismo y pude agregar una opción simple de solapamiento de línea, sintaxis y más luz, y también incorporé la idea de continuación del glifo.

He agregado esto a los ejemplos en vivo e incluí algunas notas sobre los hacks necesarios (son triviales). Entonces con esto como el texto en la página:

<textarea name="code" class="java:wraplines" cols="60" rows="10">
public class HelloWorld {

  public static void main (String[] args)

  {

    System.out.println("Hello World! But that''s not all I have to say. This line is going to go on for a very long time and I''d like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");

  }

}
</textarea>

Esta es una instantánea del resultado formateado:

captura de pantalla http://tardate.com/syntaxhighlighter/line-continuation-example.jpg

Answer 1

Aquí hay una forma (desagradable) de hacer esto. Requiere una serie de malas prácticas. Pero SO es sobre soluciones a problemas reales así que aquí vamos ...

Primero, cada línea debe estar envuelta en algún tipo de bloque contenedor. Span o p son probablemente los más apropiados.

Entonces, el estilo del bloque contenedor debe tener la altura de línea establecida. y una imagen de fondo que contiene un número de glifos de línea nueva al comienzo de cada línea, excepto la primera. Como se trata de un código, sería razonable esperar que no se envuelva más de 5 veces. Entonces repetir 5 veces probablemente sea enoygh.

Esto se puede establecer como la imagen de fondo, y debe mostrarse al comienzo de cada línea, excepto la primera. Supongo que el CSS resultante podría verse así:

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}

Answer 2

Encontré una solución muy similar a la de Jack Ryan, pero con el personaje de "continuación" al final de la línea. También sangra las líneas continuas.

El CSS:

p {
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  line-height: 16px;
  margin: 0 0 16px 0;
}

.wrap-cont {
  font-family: Courier New, Monospace;
  margin-bottom: 16px;
  width: 400px;
}

.wrap-cont p {
  background: url(wrap-cont.gif) no-repeat bottom right;
  text-indent: -32px;
  margin: 0 0 0 32px;
  padding-right: 16px;
}

El HTML:

<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
  <p>c:/Program Files/My Application/Module/bin/..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I''d like the text style to indicate that it has wrapped"</p>
  <p>c:/Program Files/My Application/Module/bin/..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I''d like the text style to indicate that it has wrapped"</p>
</div>
<p> forces a line like this not to wrap.</p>

Answer 3

Esto no se puede hacer con CSS. Lo siento. :(

Answer 4

Si desea que no sea ambiguo, tendrá que agregar el marcado. Sugiero usar un <ol> con un elemento de la lista por línea de código, porque de esa forma obtendrás la numeración de líneas gratis. Si esto es demasiado trabajo para hacer en todo el sitio, siempre puede agregarlo usando Javascript.