Thay đổi chiều cao <br> bằng css

Question

Tôi đã thấy một số question ở đây tương tự, nhưng tôi không thể nhận được bất kỳ câu trả lời nào để làm việc (ít nhất là trên chrome).

Câu hỏi này chỉ dành cho <br>, tôi biết nhiều kỹ thuật khác để thay đổi chiều cao nhưng trong trường hợp này tôi không thể thay đổi html.

bla<BR><BR>bla<BR>bla<BR><BR>bla 

css:

br { 
    display: block; 
    margin-bottom: 2px; 
    font-size:2px; 
    line-height: 2px; 
} 

mong muốn có hiệu lực: nhỏ hơn chiều cao liên-line.

Điều duy nhất tôi có thể làm việc là display:none, nhưng sau đó tất cả ngắt dòng đều bị xóa.

Đây là một số fiddle for it sử dụng một số kỹ thuật, nhưng thấy rằng nó hiển thị chính xác giống như không có bất kỳ css nào.

Answer 1

Bạn không thể thay đổi chiều cao của br thẻ chính nó, vì nó không phải là một yếu tố mà chiếm không gian trong trang. Nó chỉ là một chỉ dẫn để tạo ra một dòng mới.

Bạn có thể thay đổi chiều cao dòng bằng cách sử dụng kiểu line-height. Điều đó sẽ thay đổi khoảng cách giữa các khối văn bản mà bạn đã phân cách bằng các dòng trống, nhưng cũng là khoảng cách giữa các dòng trong một khối văn bản.

Để hoàn thành: Các khối văn bản trong HTML thường được thực hiện bằng cách sử dụng thẻ p xung quanh các khối văn bản. Bằng cách đó bạn có thể kiểm soát chiều cao của dòng bên trong thẻ p và cũng có khoảng cách giữa các thẻ p.

Answer 2

Hãy xem line-height property. Cố gắng tạo kiểu cho thẻ <br> không phải là câu trả lời.

Ví dụ:

<p id="single-spaced"> 
    This<br> 
    text<br> 
    is<br> 
    single-spaced. 
</p> 
<p id="double-spaced" style="line-height: 200%;"> 
    This<br> 
    text<br> 
    is<br> 
    double-spaced. 
</p> 

Answer 3

này cảm thấy rất hacky, nhưng trong chrome 41 trên ubuntu tôi có thể làm một <br> hơi stylable:

br { 
    content: ""; 
    margin: 2em; 
    display: block; 
    font-size: 24%; 
} 

để kiểm soát khoảng cách với cỡ chữ.

Answer 4

Chiều cao dòng của <br> có thể khác với chiều cao dòng của phần còn lại của văn bản bên trong <p>. Bạn có thể kiểm soát chiều cao dòng của các thẻ <br> độc lập với phần còn lại của văn bản bằng cách đính kèm hai trong số chúng theo kiểu <span> được tạo kiểu. Sử dụng thuộc tính css line-height, như những người khác đã đề xuất.

<p class="normalLineHeight"> 
    Lots of text here which will display on several lines with normal line height if you put it in a narrow container... 
    <span class="customLineHeight"><br><br></span> 
    After a custom break, this text will again display on several lines with normal line height... 
</p> 

Answer 5

Chiều cao dòng của thẻ br có thể khác nhau từ chiều cao dòng của phần còn lại của văn bản bên trong một đoạn văn bản bằng cách thiết lập font-size cho thẻ br.

Ví dụ: br { font-size: 200%; }

Answer 6

Bạn có thể kiểm soát chiều cao <br> nếu bạn đặt nó bên trong một chiều cao giới hạn div.Hãy thử:

<div style="height:2px;"><br></div> 

Answer 7

Sử dụng nội dung bất động sản và phong cách mà nội dung. Hành vi nội dung sau đó được điều chỉnh bằng cách sử dụng các phần tử giả. Các phần tử giả :: trước và sau khi cả hai hoạt động trong Mac Safari 10.0.3.

Phần tử này br được sử dụng làm phần tử neo cho phần tử br :: sau nội dung. Phần tử br là nơi có thể tạo kiểu khoảng cách. br :: sau là nơi br :: sau khi nội dung có thể được hiển thị và theo kiểu. Có vẻ khá, nhưng không phải là 2px <br>.

br { content: ""; display: block; margin: 1rem 0; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

br thuộc tính dòng chiều cao phần tử bị bỏ qua. Nếu giá trị âm được áp dụng cho một trong hai hoặc cả hai bộ chọn để cung cấp cho các thẻ 'lift' theo chiều dọc tới br, thì sửa khoảng cách dọc xảy ra, nhưng hiển thị từng bước hiển thị nội dung hiển thị sau mỗi thẻ br. Thụt lề chính xác bằng số tiền mà thang máy thay đổi từ chiều cao dòng chữ thực tế. Nếu bạn đoán thang máy đúng, không có thụt lề nhưng một đường cọc đơn chính xác ngang với chiều cao của đường kính thô, bị kẹt giữa các đường trước và sau.

Hơn nữa, thẻ br sau sẽ làm cho thẻ hiển thị html sau kế thừa br: sau kiểu nội dung. Ngoài ra, các phần tử giả tạo ra <br> <br> được hiểu là một đơn <br>. Trong khi lớp giả br: hoạt động làm cho mỗi <br> được diễn giải riêng biệt. Cuối cùng, sử dụng br: hoạt động bỏ qua phần tử giả br: sau và tất cả br: kiểu hoạt động. Vì vậy, tất cả những gì cần thiết là thế này:

br:active { } 

mà không có sự giúp đỡ để tạo một 2px cao < BR hiển thị >. Và ở đây lớp giả: hoạt động bị bỏ qua!

br:active { content: ""; display: block; margin: 1.25em 0; } 
br { content: ""; display: block; margin: 1rem; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

Đây chỉ là một giải pháp một phần. Lớp giả và phần tử giả có thể cung cấp giải pháp, nếu được tinh chỉnh. Đây có thể là một phần của giải pháp CSS. (Tôi chỉ có Safari, hãy thử nó trong các trình duyệt khác.)

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

Answer 8

Các BR là bất cứ điều gì nhưng 'ngoại đặc biệt': nó vẫn là một thẻ XML hợp lệ mà bạn có thể cung cấp cho các thuộc tính đến. Ví dụ: bạn không phải bao gồm nó với một khoảng để thay đổi chiều cao dòng, thay vào đó bạn có thể áp dụng chiều cao dòng trực tiếp cho phần tử.

Bạn có thể làm điều đó với inline CSS:

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br style="line-height:60vh" /> 
 
break!

Bạn thậm chí có thể sử dụng bất kỳ bộ chọn CSS bạn muốn như ID và các lớp học.

#biglinebreakid { 
 
    line-height: 900%; 
 
    // 9x the normal height of a line break! 
 
} 
 
.biglinebreakclass { 
 
    line-height: calc(6em + 66px); 
 
    // you could even use calc! 
 
}

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br id="biglinebreakid" /> 
 
break! You can use any CSS selectors you want for things like this line 
 
<br class="biglinebreakclass" /> 
 
break!

Về cơ bản, BR thẻ không phải là một số khoảng trống trong thế giới của phong cách CSS: họ vẫn có thể được theo kiểu. Tuy nhiên, tôi khuyên bạn chỉ nên sử dụng line-height cho các thẻ BR kiểu. Họ không bao giờ có ý định trở thành bất cứ điều gì nhiều hơn một break-line, và như vậy họ có thể không luôn luôn làm việc như mong đợi khi sử dụng chúng như một cái gì đó khác. Một công việc xung quanh cho những thứ như lề và paddings là để thay thế phong cách một span với một br trong nó như vậy.

#paddedlinebreak { 
 
    background: orange; 
 
    line-height: calc(6em + 100%); 
 
    padding: 3em; 
 
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible"> 
 
This is a padded line 
 
<span id="paddedlinebreak"><br /></span> 
 
break. 
 
</div>