Tôi có một đoạn văn bản lớn được chia thành các đoạn với <br>'s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Tôi muốn nới rộng khoảng cách giữa các đoạn này, giống như có hai <br>hoặc một cái gì đó tương tự. Tôi biết rằng cách đúng đắn để làm điều này là sử dụng <p></p>, nhưng ngay bây giờ tôi không thể thay đổi bố cục này, vì vậy tôi đang tìm giải pháp chỉ dành cho CSS.

Tôi đã cố gắng thiết lập <br>'s line-heightvà heightvới display: block, tôi cũng đã google và Stack Overflow-ed một thời gian ngắn, nhưng không tìm thấy bất kỳ giải pháp. Điều này thậm chí có thể mà không thay đổi bố cục?

Css:

br {
   display: block;
   margin: 10px 0;
}

Giải pháp có thể không tương thích với nhiều trình duyệt, nhưng ít nhất đó là một cái gì đó. Cũng xem xét cài đặt line-height:

line-height:22px;

Đối với Google Chrome, hãy xem xét cài đặt content:

content: " ";

Ngoài ra, tôi nghĩ rằng bạn đang bị mắc kẹt với một giải pháp JavaScript.

Đây là giải pháp chính xác thực sự có hỗ trợ nhiều trình duyệt:

  br {
        line-height: 150%;
     }

Vì vậy, peeps ở trên về cơ bản đã có một câu trả lời tương tự, nhưng ở đây nó rất ngắn gọn. Hoạt động trong Opera, Chrome, Safari & Firefox, rất có thể IE cũng vậy?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Một cách khác là sử dụng một nhân sự . Nhưng, và đây là phần xảo quyệt, làm cho nó vô hình.

Như vậy:

<hr style="height:30pt; visibility:hidden;" />

Để làm cho BR sạch hơn được mô phỏng bằng HR: Btw hoạt động trong tất cả các trình duyệt !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Theo như tôi biết <br>không có chiều cao, nó chỉ buộc phải ngắt dòng. Những gì bạn có là một văn bản với một số ngắt dòng ngoài các ngắt tự động, không phải là các đoạn con. Bạn có thể thay đổi khoảng cách dòng, nhưng điều đó sẽ ảnh hưởng đến tất cả các dòng.

Tôi chỉ gặp vấn đề này và tôi đã khắc phục bằng cách sử dụng

<div style="line-height:150%;">
    <br>
</div>

bạn có thể áp dụng chiều cao dòng trên <p>phần tử đó , để các dòng trở nên lớn hơn.

Tôi chưa từng thử phần tử giả :before/ :afterCSS2 trước đây, chủ yếu vì nó chỉ được hỗ trợ trong IE8 (điều này liên quan đến trình duyệt IE) . Đây có thể là giải pháp CSS duy nhất có thể:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Dưới đây là một ví dụ về QuirksMode .

Tôi đã có một suy nghĩ rằng bạn có thể có thể sử dụng:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Nhưng điều đó đã không làm việc trên chrome hoặc firefox.

Chỉ cần nghĩ rằng tôi đã đề cập rằng trong trường hợp nó xảy ra với bất kỳ ai khác và tôi sẽ cứu họ khỏi rắc rối.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Hoạt động trong Firefox, Chrome và Safari. Chưa được thử nghiệm trong Explorer. (Máy tính bảng Windows bị mất điện.)

Ngắt dòng, cỡ chữ hoạt động khác nhau trong Firefox & Safari.

Thật thú vị, nếu thẻ break được viết ở dạng đầy đủ như sau:

<br></br>

sau đó chiều cao dòng CSS: 145% hoạt động. Nếu thẻ break được viết là:

<br> or 
<br/> 

sau đó nó không hoạt động, ít nhất là trong Chrome, IE và firefox. Kỳ dị!

Những gì làm việc cho tôi là thêm nội tuyến này giữa các thẻ đoạn ... mặc dù không phải là giải pháp tốt nhất.

<br style="line-height:32px">

-------- Biên tập ---------

Tôi gặp vấn đề với PC / Mac với điều này ... Nó mang lại cho văn bản độ cao dòng mới nhưng không thực hiện ngắt dòng ... Bạn có thể muốn tự mình thực hiện một số thử nghiệm. Lấy làm tiếc!

Và hãy nhớ rằng (mis) sử dụng <hr>thẻ như được đề xuất ở đâu đó, sẽ kết thúc <p>thẻ, vì vậy hãy quên giải pháp đó đi.
Nếu f.ex. một cái gì đó được tạo kiểu xung quanh <p>, kiểu đó sẽ biến mất cho phần còn lại của nội dung sau khi <hr>được chèn vào.

Đây là một giải pháp hoạt động trong IE, Firefox và Chrome. Ý tưởng là tăng kích thước phông chữ của phần tử br từ kích thước cơ thể 14px lên 18px, và hạ thấp phần tử xuống 4px để kích thước thêm nằm dưới dòng văn bản. Kết quả là 4px của khoảng trắng thừa bên dưới br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

CẬP NHẬT ngày 13 tháng 9 năm 2019:

Tôi sử dụng <br class=big>để thực hiện một ngắt dòng quá khổ, khi tôi cần. Cho đến hôm nay, tôi đã tạo kiểu như thế này:

br.big {line-height:190%;vertical-align:top}

( vertical-align:topChỉ cần cho IE và Edge.)

Điều đó đã làm việc trong tất cả các trình duyệt chính mà tôi đã thử: Chrome, Firefox, Opera, Brave, PaleMoon, Edge và IE11.

Tuy nhiên, gần đây nó đã ngừng hoạt động trong các trình duyệt dựa trên Chrome : các ngắt dòng "lớn" của tôi biến thành các ngắt dòng có kích thước bình thường.

. và Android).)

Sau một số thử nghiệm và lỗi, tôi đã kết thúc với sự thay thế sau, hoạt động trong các phiên bản hiện tại của tất cả các trình duyệt đó:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Ghi chú:

line-height:190% hoạt động trong mọi thứ trừ các phiên bản gần đây của trình duyệt dựa trên Chrome.

vertical-align:toplà cần thiết cho IE và Edge (kết hợp với line-height:190%), để có thêm không gian đến sau dòng trước, nơi nó thuộc về, thay vì một phần trước và một phần sau.

display:block;content:"";margin-top:0.5em hoạt động trong Chrome, Opera & Firefox, nhưng không phải Edge & IE.

Một cách khác (đơn giản hơn) để thêm một chút không gian theo chiều dọc sau <br>thẻ, nếu bạn không ngại chỉnh sửa HTML, là với một cái gì đó như thế này. Nó hoạt động tốt trong tất cả các trình duyệt:

<span style="vertical-align:-37%"> </span><br>

(Tất nhiên, bạn có thể điều chỉnh "-37%" nếu cần, cho khoảng cách lớn hơn hoặc nhỏ hơn.) Đây là trang demo bao gồm một số biến thể khác về chủ đề:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



Ngày 28 tháng 5 năm 2020:

Tôi đã cập nhật trang demo; bây giờ nó thể hiện tất cả các kỹ thuật trên:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael và yoda đều đúng. Những gì bạn có thể làm là sử dụng <p>thẻ, trong đó, là thẻ khối, sử dụng lề dưới để bù cho khối sau, do đó bạn có thể làm điều gì đó tương tự như thế này để có khoảng cách lớn hơn:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Một cách khác là sử dụng <hr>thẻ khối , theo đó bạn có thể xác định rõ ràng chiều cao của khoảng cách.

<br />sẽ chiếm nhiều không gian như hàng chứa đầy văn bản của bạn <p>, bạn không thể thay đổi điều đó. Nếu bạn muốn lớn hơn, nó có nghĩa là bạn muốn tách thành đoạn, vì vậy hãy thêm khác <p>. Đừng quên là ngữ nghĩa nhất bạn có thể;)

bạn cũng có thể sử dụng thuộc tính "trích dẫn khối" trong CSS. Điều đó sẽ làm cho nó không ảnh hưởng đến các dòng riêng lẻ của bạn nhưng cho phép bạn đặt tham số cho các khoảng nghỉ giữa các đoạn hoặc "trích dẫn khối".

CẬP NHẬT:
Tôi đứng sửa. "blockquote" thực sự là một thuộc tính html. Bạn sử dụng nó giống như <p> và </ p> xung quanh công việc của bạn. Sau đó, bạn có thể đặt tham số cho trích dẫn khối của mình trong css như

blockquote { margin-top: 20px }

Hi vọng điêu nay co ich. Nó tương tự như cài đặt các tham số trên br và có thể hoặc không thể tương thích với trình duyệt chéo.

Bạn dường như không thể điều chỉnh chiều cao của BR, nhưng bạn có thể làm cho nó biến mất một cách đáng tin cậy bằng cách sử dụng màn hình: không

Đến trang này trong khi tìm kiếm giải pháp cho các mục sau:

Tôi gặp tình huống cổng thanh toán bên thứ 3 (Worldpay) chỉ cho phép bạn tùy chỉnh các trang thanh toán của họ với tối đa 10k CSS và HTML (không cho phép tập lệnh) được đưa vào phần thân của mẫu và sau một vài thẻ BR, FONT, v.v. Được kết hợp với DTD của họ, điều này buộc IE7 / 8 vào chế độ Quirks, điều này làm cho việc tùy chỉnh trình duyệt chéo trở nên khó khăn nhất có thể!

Tắt BR làm cho mọi thứ ổn định hơn nhiều ...

Tôi sử dụng các phương pháp này, nhưng tôi không biết nếu trình duyệt chéo

================= Phương pháp 1 ==================

br {
    display:none;
}

HOẶC LÀ

================= Cách 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

HOẶC LÀ

================= Cách 3 ==================

br:after { content: "" }
br { content: "" }

Hãy thử sử dụng line-heightthuộc tính CSS trên pthẻ có chứa brthẻ. Hãy nhớ rằng bạn có thể idcác pthẻ của mình nếu bạn muốn cách ly nó, mặc dù có thể tốt hơn bằng cách sử dụng một divcách ly, IMO.

Xin lỗi nếu người khác đã nói điều này, nhưng giải pháp đơn giản là đồ chơi xung quanh với "chiều cao đường thẳng" của bạn. Nếu bạn nhận được quá nhiều không gian khi bạn sử dụng ngắt dòng, thì đơn giản là vì bạn đã đặt chiều cao của dòng quá cao. Bạn có thể sửa lỗi này trong CSS (nhưng biết rằng nó sẽ ảnh hưởng đến mọi thứ sử dụng thuộc tính đó) hoặc bạn có thể thực hiện kiểu nội tuyến để ghi đè CSS.

Tôi đã phải phát triển một giải pháp để chuyển đổi HTML sang PDF và định tâm văn bản theo chiều dọc trong các ô của bảng, nhưng không có gì hoạt động ngoại trừ việc nhập đơn giản <br>

Vì vậy, suy nghĩ bên ngoài hộp, tôi đã thay đổi kích thước dọc bằng cách điều chỉnh kích thước phông chữ (tính bằng pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Bạn sẽ phải thực hiện nội tuyến này và trên từng thành
phần nhưng nó sẽ hoạt động trên hầu hết các trình duyệt Fiddle với chiều cao dòng để có được hiệu ứng mong muốn. Nếu bạn đặt nội tuyến trên từng thành phần, nó sẽ hoạt động trên hầu hết các trình duyệt và e-mail (nhưng điều này quá phức tạp để thảo luận ở đây).

Điều này đã tạo ra mánh khóe cho tôi khi tôi không thể làm cho khoảng cách kiểu hoạt động từ thẻ span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Sử dụng <div>

<div>Content 1</div>Content 2

Điều này cho phép một dòng mới mà không có bất kỳ không gian dọc.

Điều này trở thành

<div>Content 1</div>Content 2

Trả lời ở cấp độ tổng quát hơn cho bất kỳ ai hạ cánh ở đây vì họ đang khắc phục các sự cố về khoảng cách do <br>thẻ gây ra . Tôi phải thực hiện rất nhiều thiết lập lại để có được điểm ảnh hoàn hảo.

br {
    content: " ";
    display: block;
}

Đối với vấn đề cụ thể tôi đã giải quyết tôi phải có một không gian cụ thể giữa các dòng. Tôi đã thêm một lề vào đầu và cuối.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Tôi đã làm cho nó hoạt động trong IE7 bằng cách sử dụng kết hợp các giải pháp, nhưng chủ yếu là gói Br trong DIV như Nigel và những người khác đề xuất. Đã thêm Id và chạy tại = "máy chủ" để tôi có thể xóa BR khi xóa hộp kiểm khỏi hàng hộp kiểm.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Có thể sử dụng hai thẻ br là giải pháp đơn giản nhất hoạt động với tất cả các trình duyệt. Nhưng nó là lặp đi lặp lại.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Làm thế nào về việc chỉ thêm một đoạn thay vì ngắt dòng như vậy

bla la la bla bla abla la la bla bla aba la la bla bla

Sau đó, bạn có thể chỉ định đường kẻ hoặc đệm hoặc bất cứ điều gì cho p đó