Cách hiển thị văn bản nhiều dòng trong một ô bảng


119

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:


164

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.

Thumbs up, 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.
leesei

Tôi đang ở trong một tình huống 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?
JoeBrockhaus

1
Giải pháp này còn lâu mới trở thành hoàn hảo. Kết quả là Excel tạo ra nhiều dòng cho các ô có dấu ngắt dòng. Câu trả lời đúng duy nhất có thể được tìm thấy ở đây: bennadel.com/blog/…
Elmue

55
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.


1
Đây là một giải pháp tốt, được nhắm mục tiêu. Các <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.
chuyển vào

Tôi đã gặp sự cố trong đó dữ liệu của tôi chứa dòng mới. Các giải pháp khác như thay thế văn bản bằng <br/> hoặc <div> hoặc <pre> chỉ được coi là văn bản. Giải pháp này khắc phục hoàn hảo vấn đề đó.
Anshuman Goel

Tuyệt diệu!! Điều này làm việc rất tốt cho tôi. Tôi đã có một JDataTable liệt kê nhiều văn bản khác nhau và tôi cần bạn css để bọc văn bản đúng cách! Tiết kiệm trong ngày Cảm ơn rất nhiều!
PatsonLeaner, 09/07/19

1
Điều này phù hợp với tôi về mặt duy trì ngắt dòng, nhưng thêm ngắt dòng vào đầu mỗi ô ... có giải pháp nào không?
jtr13

30

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>

3
Tuy nhiên, điều này sẽ ghi đè lên phông chữ bằng monospace.
hardmooth

23

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.


7

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()


6

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.


5

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>


2
nó phải là một bình luận không phải là một câu trả lời.
Deep Sharma

<br> phá vỡ ngữ nghĩa của bảng. Khi xem bảng bằng trình duyệt dựa trên văn bản, các dòng mới được hiển thị giống như các dòng trong bảng.
JAT86

3

đ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 }

1

Tôi chỉ thêm vào <br>bên trong <td>và nó hoạt động tốt, hãy ngắt dòng!


0

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>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.