Tôi muốn hiển thị một đoạn từ cơ sở dữ liệu vào một ô bảng.
Kết quả là 1 dòng lớn, bỏ qua cách tổ chức của nó trong cơ sở dữ liệu. bỏ qua 'enter' chẳng hạn (dòng mới)
Tôi muốn hiển thị nó chính xác theo cách nó được viết trong cơ sở dữ liệu.
Ví dụ: nếu đoạn văn được lưu như thế này:
hello ,
my name is x.Tôi muốn nó được hiển thị chính xác như vậy, thay vì:
hello, myname is x.Câu trả lời:
Bạn muốn sử dụng CSS white-space:pređược áp dụng cho phù hợp <td>. Để thực hiện việc này với tất cả các ô trong bảng, ví dụ:
td { white-space:pre }Ngoài ra, nếu bạn có thể thay đổi đánh dấu của mình, bạn có thể sử dụng <pre>thẻ xung quanh nội dung của mình. Theo mặc định, các trình duyệt web sử dụng biểu định kiểu tác nhân người dùng của họ để áp dụng white-space:prequy tắc tương tự cho phần tử này.
Phần tử PRE cho tác nhân người dùng trực quan biết rằng văn bản kèm theo được "định dạng sẵn". Khi xử lý văn bản được định dạng trước, tác nhân người dùng trực quan:
- Có thể để nguyên khoảng trắng.
- Có thể hiển thị văn bản với phông chữ có độ cao cố định.
- Có thể tắt tính năng tự động bọc từ.
- Không được vô hiệu hóa xử lý hai chiều.
white-space: pre;đang bị bỏ qua khi áp dụng trong <td>thẻ. Sử dụng <pre></pre>để bao bọc nội dung của chúng tôi hoạt động tốt, nhưng do việc sử dụng bảng này (xuất sang excel), số cột và hàng lớn sẽ kích thước của tệp đã xuất và khiến excel bị lỗi khi đọc tệp. (kỳ quặc, tôi biết). Có ai khác nhìn thấy điều này hoặc có một ý tưởng cho một giải pháp?
style="white-space:pre-wrap; word-wrap:break-word"Điều này sẽ giải quyết vấn đề của dòng mới. thẻ pre sẽ thêm CSS bổ sung so với yêu cầu.
<pre>thẻ làm tất cả mọi thứ vượt ra ngoài chỉ cho phép ký tự xuống dòng, nhưng các thiết lập phong cách giải quyết duy nhất là vấn đề được trình bày.
Gói nội dung trong thẻ <pre>(văn bản được định dạng trước)
<pre>hello ,
my name is x.</pre>Hai gợi ý để giải quyết vấn đề này:
GIẢI PHÁP 1: <div style="white-space:pre;">{database text}</div>hoặc<pre>{database text}</pre>
Đây là giải pháp tốt nếu văn bản của bạn không có thẻ html hoặc thuộc tính css. Cũng cho phép duy trì các tab chẳng hạn.
GIẢI PHÁP 2: Thay thế \nbằng<p></p> or <br/>
Đây là một giải pháp nếu bạn chỉ muốn thêm dấu ngắt dòng mà không làm mất các thuộc tính hoặc định dạng văn bản khác. Một ví dụ trong php sẽ là$text = str_replace("\n","<br />",$database_text);
Bạn cũng có thể sử dụng <p></p>hoặc <div></div>, nhưng điều này yêu cầu phân tích cú pháp văn bản nhiều hơn một chút.
Trên mã phía máy chủ của bạn, hãy thay thế các dòng mới ( \n) bằng <br/>.
Nếu bạn đang sử dụng PHP, bạn có thể sử dụng nl2br()
Xin chào, tôi cần phải làm điều tương tự! Đừng hỏi tại sao nhưng tôi đã tạo một html bằng python và cần một cách để lặp qua các mục trong danh sách và để mỗi mục chiếm một hàng riêng TRONG VÒNG MỘT TẾ BÀO của bảng.
Tôi thấy rằng thẻ br hoạt động tốt cho tôi. Ví dụ:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
item 1 <BR>
item 2 <BR>
item 3 <BR>
item 4 <BR>
</TD>
</TR>
</TABLE>
</BODY>Điều này sẽ tạo ra đầu ra mà tôi muốn.
Tôi sử dụng thẻ mã html sau mỗi dòng (xem bên dưới) và nó phù hợp với tôi.
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
đoạn mã dưới đây hoạt động như một phép thuật đối với tôi >>
td { white-space:pre-line }Nếu bạn có một biến chuỗi \ntrong đó mà bạn muốn đặt bên trong td, bạn có thể thử
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
white-spacelà một thuộc tính CSS 2.1 được hỗ trợ rộng rãi. Đã thử nghiệm trên IE8, hoạt động tuyệt vời.