cho biết ngắt dòng tự động trong không gian trắng: phần tử bao bọc trước

Question

Tôi đang sử dụng kiểu white-space: pre-wrap trên phần tử HTML <pre> để cho phép các đường ngắt khi chúng dài hơn cửa sổ trình duyệt.

Thật không may những đường bị hỏng đó cũng xem như thể chúng có ngắt dòng ở cuối; người dùng không thể nhìn thấy nếu đó là ngắt dòng tự động.

Có cách nào để hiển thị hoặc ở cuối dòng đang gói (như biểu tượng emacs với ký tự \) hoặc ở đầu dòng được bao bọc là chúng tiếp tục dòng trước đó (ví dụ: với →)?

Sao chép & dán không được sao chép các ký tự tiếp tục.

---

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 vẽ, với một → vào đầu dòng tiếp:

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 được thiết kế để giữ cho văn bản như nó đã được gõ. Nó giúp giữ cho thơ và văn bản đặc biệt như chúng được dự định để được nhìn thấy và không được định dạng bởi trình duyệt. Tôi sẽ nghĩ hầu hết mọi người sẽ có thể nói một dòng văn bản đang được bọc trong Pre với khoảng trắng: được bọc trước bởi vì nó sẽ trông giống như thế này: Năm con khỉ nhỏ nhảy trên giường, {{line break}} Một người ngã xuống và va đầu. {{Ngắt dòng}} Mama gọi là Doctor và Bác sĩ nói, {{ngắt dòng}} "Không còn con khỉ nhảy trên giường!'. {{Ngắt dòng}}

Nếu bạn đi với thẳng HTML <p> nó sẽ trông giống như bạn đã gõ nó trong ví dụ của bạn và <pre> với khoảng trắng: trước khi bọc sẽ trông không gian như bạn đã gõ nó. CSS để tô màu và kích thước hoặc thực hiện <span> trên toàn bộ câu cho màu nền CSS.

Answer 2

AFAIK không phải với CSS, thay vào đó bạn có thể thay thế mỗi dòng mới bằng 2 dòng mới để dòng mới được phân biệt khi văn bản kết thúc, để thực hiện việc này hoặc nhập thủ công hai - hoặc nhiều hơn - ngắt dòng <br> s cho mỗi dòng mới hoặc nếu bạn có thể sử dụng javascript sau đó bạn có thể thay thế mỗi dấu chấm phẩy ;-vì ví dụ được cung cấp trong câu hỏi là mã nơi mỗi dòng kết thúc với; - thay thế nó với ;\n\n-hoặc với ;<br><br> thay - do đó nó sẽ được công nhận.

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 >