wskazuje automatyczne łamanie wiersza w białej przestrzeni: element pre-wrap

Question

Używam stylu white-space: pre-wrap na elemencie HTML <pre>, aby umożliwić przerywanie linii, gdy są dłuższe niż szerokość okna przeglądarki.

Niestety te linie przerywane również wyglądają tak, jakby miały kreskę na końcu; użytkownik nie może zobaczyć, czy był to automatyczny podział linii.

Czy istnieje sposób pokazania na końcu linii, że owijanie się dzieje (tak jak emacs ma znak \), lub na początku zawijanych linii, że są kontynuacją poprzedniej linii (np. z →)?

Kopiowanie & wklejanie nie powinno kopiować znaków kontynuacji.

---

Example code:

<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre > 

Preferred rendering, z → na początku linii uzupełniających:

for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx= 
→initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, 
→posx+selwidth-selheight, selheight, posx-selheight, selheight]); 

Answer 1

Pre ma zachować tekst, jak to zostało wpisane. Pomogło to zachować wiersze i teksty specjalne, tak jak powinny być postrzegane, a nie formatowane przez przeglądarkę. Myślę, że większość ludzi będzie w stanie powiedzieć, że linia tekstu jest opakowana w Pre z białymi znakami: pre-wrap, ponieważ wyglądałoby to tak: Pięć małych małp skaczących na łóżku , {{line break}} Jeden odpadł i uderzył głową. {{Linia przerwa}} Mama nazywa lekarz i Lekarz powiedział, {{linia przerwa}} „Nigdy więcej małpy skoki na łóżku!”. {{Linia przerwa}}

Jeśli poszedł z prosto HTML <p> to będzie wyglądać jak trzeba było wpisane w swoim przykładzie i <pre> ze spacjami. pre-wrap będzie wyglądała przestrzeń, jak masz to wpisane

Aby pokolorować końce każdej linii można spróbować umieścić <span> i dać to CSS do koloru i rozmiaru lub zrobić <span> na całym zdaniu, nadając mu kolor tła CSS.

Answer 2

AFAIK nie z CSS, zamiast tego możesz zastąpić każdy nowy wiersz 2 nowymi liniami, tak aby nowe linie zostały rozróżnione podczas zawijania tekstu, aby to zrobić ręcznie wprowadź dwa - lub więcej - linie podziału wierszy <br> s dla każdej nowej linii lub jeśli możesz używać JavaScript wówczas można wymienić każdy średnik ; - ponieważ warunkiem przykładem w tej kwestii jest kod gdzie każda linia kończy się; - zastąpić go ;\n\n - lub ;<br><br> zamiast - stąd będzie ona rozpoznana.

JS Fiddle

var pre = document.getElementsByTagName('pre')[0], 
 
    preHTML = pre.innerHTML; 
 

 
pre.innerHTML = preHTML.replace(/;\s*/g, ";\n\n");

<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre >