CSS dòng trống

Thuộc tính CSS

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2 kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng cho. Giả sử bạn có HTML chính xác như thế này

  A bunch of words you see.

Bạn đã tạo kiểu cho div để có chiều rộng được đặt là 100px. Với kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

3. Nếu không làm gì cả, giá trị mặc định của

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2 là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

5 và văn bản sẽ ngắt dòng. Xem ví dụ bên dưới hoặc làm theo ở nhà với bản demo

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

Nếu bạn muốn ngăn văn bản xuống dòng, bạn có thể áp dụng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

6

Lưu ý trong ví dụ về mã HTML ở đầu bài viết này, thực tế có hai ngắt dòng, một ngắt dòng trước và một ngắt dòng sau, cho phép văn bản nằm trên một dòng riêng (trong mã). Khi văn bản hiển thị trong trình duyệt, các ngắt dòng đó xuất hiện như thể chúng bị loại bỏ. Cũng loại bỏ các khoảng trắng thừa trên dòng trước chữ cái đầu tiên. Nếu chúng tôi muốn buộc trình duyệt hiển thị các ngắt dòng đó và các ký tự khoảng trắng thừa, chúng tôi có thể sử dụng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Nó được gọi là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

8 vì hành vi giống như thể bạn đã bọc văn bản trong các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

9 (theo mặc định sẽ xử lý khoảng trắng và ngắt dòng theo cách đó). Khoảng trắng được tôn trọng chính xác như trong HTML và văn bản không ngắt dòng cho đến khi có dấu ngắt dòng trong mã. Điều này đặc biệt hữu ích khi hiển thị mã theo nghĩa đen, mang lại lợi ích về mặt thẩm mỹ từ một số định dạng (và đôi khi là cực kỳ quan trọng, như trong các ngôn ngữ phụ thuộc vào khoảng trắng. )

Có lẽ bạn thích cách

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

8 tôn trọng khoảng trắng và dấu ngắt, nhưng bạn cần văn bản được ngắt dòng thay vì có khả năng thoát ra khỏi vùng chứa chính của nó. Đó là những gì

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

1 dành cho

Cuối cùng,

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2 sẽ ngắt các dòng mà chúng ngắt mã, nhưng khoảng trắng thừa vẫn bị xóa

Thật thú vị, ngắt dòng cuối cùng không được tôn trọng. Theo CSS2. 1 thông số kỹ thuật. “Các dòng bị ngắt ở các ký tự dòng mới được giữ nguyên và khi cần thiết để điền vào các hộp dòng. ” vì vậy có lẽ điều đó có ý nghĩa

Đây là một bảng để hiểu các hành vi của tất cả các giá trị khác nhau

Dòng mớiDấu cách và tabGói văn bản

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

5Thu gọnThu gọnGói

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

8Giữ nguyênGiữ lạiKhông bọc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

5Thu gọnThu gọnKhông bọc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

6Giữ nguyênGiữ lạiGói

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7Giữ nguyênThu gọnGói

Trong CSS3, thuộc tính

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2 thực sự sẽ đi theo biểu đồ đó và ánh xạ các thuộc tính thành

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

9 và

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

20 tương ứng

Làm thế nào để bạn thêm một dòng trống vào HTML?

Lý do tại sao bạn có thể cần phải chèn các dòng trống vào mã HTML của mình có thể là để hiển thị nó dưới dạng PDF. Một trường hợp gần đây của tôi với một dự án là có một khu vực ở cuối bức thư để ai đó có thể ký tên. Điều này có thể hữu ích chẳng hạn như khi tải tài liệu lên Adobe Sign và có chữ ký của một số bên

Bất kể lý do hoặc trường hợp sử dụng cần thiết để chèn một dòng trống vào mã của bạn, đây là một số phương tiện có sẵn để bạn sử dụng

Tôi đã chia nhỏ từng phần theo những gì cần thay đổi và chúng như sau

• Sử dụng thẻ HTML
• Sử dụng các thực thể HTML
• Sử dụng CSS

Hãy xem xét từng cách tiếp cận chi tiết hơn

Sử dụng thẻ HTML

Có ba thẻ có sẵn để giúp chèn các dòng trống vào mã của bạn. Ba thẻ này được gọi là thẻ ngắt, thẻ định dạng trước và thẻ đoạn văn

Hãy xem xét từng chi tiết hơn một chút

Sử dụng thẻ

Yours sincerely,
  
  
Ryan

3

Nếu bạn gặp khó khăn với các nút gốc bọc văn bản của mình, thì một giải pháp bạn có thể sử dụng là nối thêm thẻ HTML để bao gồm một dòng trống bằng cách chèn thẻ

Yours sincerely,
  
  
Ryan

4

Nếu thẻ BR chứa dấu gạch chéo lên, nó sẽ giúp người đọc mã biết thẻ đang tự đóng. Nói cách khác, nó không cần thẻ đóng

Yours sincerely,
  
  
Ryan

5 tương ứng

Nếu bạn tình cờ viết mã

Yours sincerely,
  
  
Ryan

6 của mình mà không có dấu gạch chéo lên, bạn không cần phải lo lắng về điều đó vì hầu hết các trình duyệt hoặc công cụ kết xuất HTML sẽ biết thẻ

Yours sincerely,
  
  
Ryan

7 là thẻ không cần phải có thẻ đóng tương ứng

Cá nhân tôi thích chèn dấu gạch chéo lên hoàn toàn để dễ đọc hơn, tôi có thể nhanh chóng thấy từ mã rằng thẻ

Yours sincerely,
  
  
Ryan

4 đang tự đóng và tôi không cần phải tìm kiếm xung quanh để tìm thẻ đóng bị thiếu

Bằng cách chèn thẻ

Yours sincerely,
  
  
Ryan

7 vào cuối dòng, nó sẽ chèn một dấu ngắt (i. e. xuống dòng) và bắt đầu văn bản sau thẻ

Yours sincerely,
  
  
Ryan

4 trên một dòng mới. Nếu cần thêm một dòng trống, hãy chèn một thẻ BR khác

Đây là một ví dụ về mã sẽ trông như thế nào khi sử dụng các thẻ

Yours sincerely,
  
  
Ryan

3 và kết quả tiếp theo của nó trong HTML

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Trân trọng,


Ryan

Hãy cẩn thận với việc sử dụng thẻ ngắt dòng vào mã HTML của bạn. Bạn có thể muốn kiểm tra bài đăng khác của tôi về chèn ngắt dòng trong HTML về mục đích của ngắt dòng

Sử dụng thẻ div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }82

Nếu bạn có thể sửa đổi nút gốc bao bọc khu vực mà bạn muốn các dòng trống của mình đi tới, thì tùy chọn này có thể mang lại sự linh hoạt nhất mà không cần phải chèn bất kỳ thẻ bổ sung nào

Vấn đề duy nhất khi sử dụng các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

83 là bạn có thể cần tạo kiểu cho nó để phù hợp với các định dạng khác trên trang của mình. Ngoài ra, nó sẽ không cho phép sử dụng bất kỳ thẻ HTML nào khác bên trong

Để chèn một dòng trống bằng cách sử dụng các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

82, chỉ cần sử dụng phím enter trên bàn phím của bạn và nhập thông tin về cách nó xuất hiện

Đây là một ví dụ sử dụng các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

82 và kết quả tiếp theo của nó trong HTML

Yours sincerely,
  
  
Ryan

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

8

Như bạn có thể thấy từ ví dụ trên, rất ít cần mã để thay đổi. Tuy nhiên, điều đó có nghĩa là các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

83 sẽ yêu cầu kiểu dáng cụ thể của chúng vì trình kết xuất hoặc trình duyệt sẽ hiển thị phần này hoàn toàn khác so với phần còn lại của nội dung của bạn

Ngoài ra, bạn có thể phải thêm một hoặc hai dấu cách trên các dòng trống đó, nếu không nó có thể bị hiển thị là lỗi và các dòng trống có thể bị xóa

Sử dụng thẻ div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }87

Một cách khác để thêm một dòng trống bằng cách sử dụng các thẻ HTML là sử dụng thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

88 đoạn tiêu chuẩn

Nếu cấu trúc nội dung của bạn quan trọng và các yếu tố cần được bao bọc trong các thẻ đoạn văn, bạn có thể thêm một dòng trống bằng cách chỉ cần chèn một phần đoạn văn trống, như vậy

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Trân trọng,

ryan

Bây giờ, bạn sẽ nhận thấy trong kết quả ở trên rằng WordPress chưa hiển thị đoạn trống (dòng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

89). Việc kiểm tra xem mã trên có hoạt động hay không rất quan trọng vì một số trình kết xuất có thể xóa đoạn trống này vì nghĩ rằng đã có lỗi

Do đó, để bắt buộc dòng trống, hãy nhập nội dung nào đó giữa các thẻ đoạn văn, chẳng hạn như ký tự khoảng trắng hoặc thực thể HTML cho khoảng trắng không ngắt

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

70 như vậy

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

0

Trân trọng,

 

ryan

Như bạn có thể thấy từ đầu ra HTML ở trên, WordPress không coi đoạn giữa là lỗi và do đó hiển thị đoạn giữa, hiển thị một dòng trống

Sử dụng tham chiếu ký tự/thực thể HTML

Một cách khác để tạo một dòng trống trong đầu ra HTML của bạn là sử dụng các thực thể HTML. Tôi đã minh họa một thực thể HTML ở trên với ký tự khoảng cách không ngắt

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

70 nhưng còn hàng trăm thực thể khác nữa

Thực thể HTML là một đại diện của ký tự ASCII và được chú thích bằng cách viết chúng bằng dấu và theo sau là chữ viết tắt, chẳng hạn như

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

72 hoặc số thứ tự ASCII của chúng (bạn có thể đọc thêm về chủ đề hấp dẫn này về số thứ tự bằng mã Python tại đây . Cuối cùng, đảm bảo thực thể được đóng lại bằng dấu chấm phẩy

Ví dụ: ký tự khoảng trắng không ngắt có thể được viết dưới dạng tham chiếu thực thể viết tắt như

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

70 hoặc dưới dạng tham chiếu ký tự như

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

74 với cả hai biểu thức là tương đương

Vì ISO-8859-1 đã xác định bộ ký tự cho HTML 4. 01 tiêu chuẩn. Trong 32 ký tự đầu tiên (từ 0 đến 31) là các ký tự điều khiển, một số ký tự xác định ngắt dòng

Sử dụng tham chiếu ký tự trả về vận chuyển

Tham chiếu ký tự HTML cho ký tự xuống dòng là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

75 và một ví dụ về điều này được thấy trong đoạn mã sau

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

6

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Nếu không có gì được hiển thị, có khả năng hệ điều hành không diễn giải điều này như bình thường. Hãy thử cái tiếp theo…

Sử dụng tham chiếu ký tự nguồn cấp dữ liệu dòng

Một ký tự HTML khác có sẵn là ký tự Nguồn cấp dữ liệu Dòng, ký tự này có ký hiệu `

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

8

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Điều này dường như hiển thị tốt trên máy Mac OS của tôi, nhưng nếu bạn đang sử dụng Windows hoặc trên thiết bị di động thì cái này hay cái kia có thể không hoạt động. Do đó, tốt nhất nên kết hợp cả hai thành một cái gì đó như thế này

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

0

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7

Tôi đã chèn ký tự xuống dòng trước vì một số máy Windows thích thứ tự này hơn. vận chuyển trở lại sau đó nguồn cấp dữ liệu

Dù sao, hãy thử các tham chiếu ký tự HTML ở trên trong mã của bạn nếu đây là một tùy chọn hấp dẫn bạn

Sử dụng CSS

Tất cả các ví dụ trên đều yêu cầu chèn mã bổ sung, cho dù đó là mã HTML trực tiếp hay ký tự ASCII

Nếu không có khả năng chèn dữ liệu bổ sung thì sao?

Sử dụng Thuộc tính CSS div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }76

Một phương tiện là sử dụng thuộc tính

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

76 trong CSS

Có một số tùy chọn có sẵn cho loại này, nhưng tùy chọn mà tôi quan tâm nhất nếu văn bản của tôi được cố định và tôi muốn xuất kết quả này theo đầu ra của nó là tùy chọn

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

78

Đây là một ví dụ minh họa việc sử dụng này (Tôi đã chèn thuộc tính

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

79, nhưng thay vào đó, mã này có thể dễ dàng được chèn vào biểu định kiểu)

Yours sincerely,
  
  
Ryan

1

Trân trọng, Ryan

Sử dụng lề hoặc đệm

Nếu cấu trúc mã của bạn được gói trong các thẻ cho mỗi dòng, thì bạn có thể muốn xem xét việc đặt khoảng cách lớn hơn bên dưới dòng đầu tiên (hoặc khoảng cách lớn hơn bên trên dòng thứ hai)

Thuộc tính CSS có thể dễ dàng cho phép chức năng này là thuộc tính

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

00 hoặc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

01

Dưới đây là một ví dụ minh họa việc sử dụng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

00 trong đó mỗi dòng được bao bọc trong một thẻ HTML

Yours sincerely,
  
  
Ryan

2

Trân trọng,

ryan

Một lần nữa, giải pháp này phù hợp nhất khi bạn không thể đưa đoạn trống vào HTML như đã đề cập ở trên và mỗi phần được bao bọc trong thẻ HTML của chính nó

Bạn cũng có thể cần buộc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

03 trên đoạn văn sẽ có khoảng cách vì các thuộc tính CSS khác có thể ghi đè

Bản tóm tắt

Có một số cách để chèn một dòng trống vào mã HTML của bạn. Một số phương pháp phụ thuộc vào nội dung bạn có thể đưa vào (nếu có), trong khi các phương pháp khác có thể sử dụng CSS để giúp cung cấp khoảng cách cần thiết

\n trong HTML là gì?

Một dòng trống là gì?

Thẻ HTML nào được sử dụng để chèn các dòng trống?