Czy jest to możliwe w CSS, aby pokazać wskazanie, że linia owinięta. Na przykład mam następujące informacje w bloku "pre":

<html><body>Hello World</body></html>

Ustawiłem white-space do wstępnego owinięcia, aby nie spowodować problemów z prawym przewijaniem. To działa dobrze. Pokazuje coś takiego:

<html><body>Hello World</body>
</html>

Ale chcę pewnego wskazania, że linia owinięta. Coś jak:

<html><body>Hello World</body>
| </html>

Następnie mogę powiedzieć czytelnikowi, że | oznacza zawinięte linię. Tak więc traktuj go jako pojedynczą linię tekstu. Będzie to również bardzo przydatne, jeśli pęknie w środku czegoś, gdzie okładka jest straszna, taka jak:

form.getSubmit().style.background
Color = 'green';
4
kainaw 19 luty 2018, 20:02

3 odpowiedzi

Najlepsza odpowiedź

W ten sposób skończyłem to, ale działa tylko, ponieważ istnieje tłumacz między oryginalnym tekstem a HTML. Pierwotnie tłumacz umieszczony

 przed tekstem i 
po tekście. Zmieniłem go, aby umieścić
 przed każdą linią i n 
na końcu każdej linii (n jest znakiem nowej linii do wymuszenia przerwy linii). Potem robię 1 szary obraz 1 pikselowy zwany szary.png. Z tym zrobiłem:

pre {
  white-space:pre-wrap;
  padding-left:1em;
  text-indent:-1em;
  background-image:url(gray.png);
  background-repeat:no-repeat;
  background-position:0px 1.5em;
  background-size:1em 100em;
}

Teraz, na normalną linię, wyściółki i tiret tekstu anulują się nawzajem. Tekst pojawia się w pozycji normalnej. Gdy tekst okłady tekst jest wcięty z powodu wyściółki. Ponadto obraz tła pojawia się po lewej stronie. Jest to 100iem wysokości, więc obejmie wiele linii. Nie mogłem użyć powtarzania-y, ponieważ powtarza zarówno kierunki, w górę iw dół. Efekt końcowy wygląda dla mnie miło.

1
kainaw 22 luty 2018, 20:22

Właśnie starałem się wyobrażać: Jeśli masz maksymalną liczbę linii w fragmentach kodu, możesz grać z pseudoelementem:

Codepen demo


Markup

<pre>&lt;html>
   &lt;body>
       Hello World
   &lt;/body>
&lt;/html&gt;
</pre>

CSS

pre {
  background: yellowgreen;
  color: #fff;
  line-height: 1.5;
  font-size: 1.3rem;
  overflow: hidden;
  margin: 30px;
  border: 15px yellowgreen solid;
  position: relative;
  padding-left: 1.25em;
  text-indent: -1.25em;
}

pre:before {
  position: absolute;
  z-index: 1;
  line-height: inherit;
  font-size: inherit;
  color: #424242;
  content: "\A\2424\A\2424\A\2424..." /* Ad libitum */
}

Jako symbol nowej linii użyłem Unicode U + 2424 () SYMBOL FOR NEWLINE, ale oczywiście możesz wybrać inny z tabeli Unicode

Ideą jest użycie pre:before pojawiające się z drugiej linii (zawartość rozpoczyna się od nowej linii) dzięki zastosowanej padding-left (pierwsza linia ma ujemny text-indent).

Działa to aż do zdefiniowania wielu par \A\2424 wewnątrz właściwości content przynajmniej równa maksymalnej liczbie LOC.


końcowy wynik

enter image description here

2
Fabrizio Calderan 20 luty 2018, 07:18