Bạn có thể nhắm mục tiêu <br /> với css không?

Có thể nhắm mục tiêu <br/>thẻ ngắt dòng bằng CSS không?

Tôi muốn có một đường đứt nét 1px mỗi khi có ngắt dòng. Tôi đang tùy chỉnh một trang web bằng CSS của riêng mình và không thể thay đổi bộ HTML, nếu không tôi sẽ sử dụng một số cách khác.

Tôi không nghĩ là có thể nhưng có lẽ có một cách mà ai đó biết.

BRtạo ra một ngắt dòng và nó chỉ là một ngắt dòng. Vì yếu tố này không có nội dung, nên chỉ có một vài phong cách có ý nghĩa để áp dụng trên nó, như clearhoặc position. Bạn có thể đặt BRđường viền nhưng bạn sẽ không thấy đường viền vì nó không có kích thước trực quan.

Nếu bạn muốn tách biệt hai câu một cách trực quan, thì có lẽ bạn muốn sử dụng thước kẻ ngang dành cho mục tiêu này. Vì bạn không thể thay đổi đánh dấu, tôi sợ chỉ sử dụng CSS, bạn không thể đạt được điều này.

Có vẻ như, nó đã được thảo luận trên các diễn đàn khác. Trích xuất từ Re: Đặt chiều cao của phần tử BR bằng CSS :

[T] điều này dẫn đến một trạng thái hơi kỳ lạ đối với BR ở một mặt, nó không được coi là một yếu tố bình thường, mà thay vào đó là một ví dụ của \ A trong nội dung được tạo, nhưng mặt khác nó lại được coi là một yếu tố bình thường trong đó (một tập hợp con giới hạn) thuộc tính CSS đang được cho phép trên nó.

Tôi cũng tìm thấy một sự làm rõ trong đặc tả CSS 1 (không có thông số kỹ thuật cấp cao hơn đề cập đến nó):

Các thuộc tính và giá trị CSS1 hiện tại không thể mô tả hành vi của phần tử 'BR'. Trong HTML, phần tử 'BR' chỉ định ngắt dòng giữa các từ. Trong thực tế, phần tử được thay thế bằng một ngắt dòng. Các phiên bản tương lai của CSS có thể xử lý nội dung được thêm và thay thế, nhưng các trình định dạng dựa trên CSS1 phải xử lý đặc biệt 'BR'.

Các thử nghiệm của Grant Wagner cho thấy rằng không có cách nào để tạo kiểu BRnhư bạn có thể làm với các yếu tố khác. Ngoài ra còn có một trang web trực tuyến nơi bạn có thể kiểm tra kết quả trong trình duyệt của mình .

Cập nhật

pelms đã thực hiện một số điều tra thêm và chỉ ra rằng IE8 (trên Win7) và Chrome 2 / Safari 4b cho phép bạn tạo kiểu BRphần nào. Và thực tế, tôi đã kiểm tra trang demo IE với công cụ IE8 của IE Net Renderer và nó đã hoạt động.

Cập nhật 2 c69 thực hiện một số cuộc điều tra sâu hơn, và nó quay ra bạn có thể phong cách điểm đánh dấu cho brkhá nhiều (tuy nhiên, không qua trình duyệt), nhưng điều này sẽ không ảnh hưởng đến dòng phá vỡ chính nó, bởi vì nó dường như thuộc về chứa mẹ.

Hãy thử như sau, tôi kết hợp nó với Bản cập nhật 2 từ một câu trả lời khác với số phiếu cao và nó hoạt động hoàn hảo với tôi:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Có một lý do chính đáng để bạn cần tạo kiểu <br>thẻ.

Khi đó là một phần của mã bạn không muốn (hoặc không thể) thay đổi và bạn muốn đặc biệt này <br>không được hiển thị.

.xxx br {display:none}

Có thể tiết kiệm rất nhiều thời gian và đôi khi ngày của bạn.

Vì lợi ích của bất kỳ khách truy cập nào trong tương lai có thể đã bỏ lỡ nhận xét của tôi:

br {
    border-bottom:1px dashed black;
}

không hoạt động.

Nó đã được thử nghiệm trong IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 cho Windows, Opera 9.6 & 10 (alpha) và Google Chrome (phiên bản 2) và nó không hoạt động trong bất kỳ họ Nếu tại một thời điểm nào đó trong tương lai ai đó tìm thấy một trình duyệt hỗ trợ đường viền trên một <br>phần tử, xin vui lòng cập nhật danh sách này.

Cũng lưu ý rằng tôi đã thử một số thứ khác:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Trong số đó, những thứ sau đây hoạt động trong Opera 9.6 và 10 (alpha) (cảm ơn porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Không hữu ích lắm khi nó chỉ được hỗ trợ trong một trình duyệt, nhưng tôi luôn thấy thú vị khi xem các trình duyệt khác nhau thực hiện thông số kỹ thuật như thế nào.

Tôi biết bạn không thể chỉnh sửa HTML, nhưng nếu bạn có thể sửa đổi CSS, bạn có thể thêm javascript không?

nếu vậy, bạn có thể bao gồm jquery, sau đó bạn có thể làm

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

hiển thị như dưới đây trong IE8 ... mặc dù không sử dụng nhiều trong một trình duyệt.

(NB Tôi đang sử dụng IE 8.0.7100 (trên Win7 RC) nếu điều đó tạo ra sự khác biệt)

Cũng thế,

br:after { content: "..." }  
br { content: "" }`

hoặc là,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

đưa ra một đường đứt nét trong Chrome 2 / Safari 4b nhưng mất ngắt dòng (trừ khi bất kỳ ai có thể đưa ra cách giới thiệu lại điều đó) làm cho nó ít hơn vô dụng.

ví dụ:
thử nghiệm IE8 , thử nghiệm Chrome / Safari và một thử nghiệm khác

Các thử nghiệm của riêng tôi cho thấy rằng brcác thẻ không muốn được nhắm mục tiêu cho css.

Nhưng nếu bạn có thể thêm kiểu thì có lẽ bạn cũng có thể thêm thẻ scrip vào tiêu đề của trang? Liên kết với một bên ngoài .jslàm một cái gì đó như thế này:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Vì vậy, trong ngắn hạn, nó không tối ưu, nhưng đây là giải pháp của tôi.

điều này dường như để giải quyết vấn đề:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

BR là một yếu tố nội tuyến, không phải là một yếu tố khối.

Vì vậy bạn cần:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Mặt khác, các trình duyệt hơi cầu kỳ về những thứ như vậy sẽ từ chối áp dụng các đường viền cho các phần tử BR của bạn, vì các phần tử nội tuyến không có viền, phần đệm hoặc lề.

CẬP NHẬT NGÀY 9/9/2019:

Mục đích của việc tạo kiểu <br> thẻ như thế này là để tạo một ngắt dòng "lớn hơn" (nghĩa là có thêm một khoảng trống giữa các dòng).

Lớp "oldbig" (bên dưới) đã được kiểm tra và hoạt động đúng trong Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 và IE 11.48.17134.0, theo kiểu. Thật không may, nó đã bị hỏng trong phiên bản Chrome 76 và các dẫn xuất của nó (khoảng tháng 8 năm 2019). Triệu chứng là không gian thêm giữa các dòng không còn được hiển thị.

Lớp "newbig" được kiểm tra và hoạt động đúng trong các phiên bản hiện tại của Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave và Palemoon:

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

Đây là bản demo:

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

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Đây là kết quả, được hiển thị trong Chrome v.76:

Điều này sẽ hoạt động, nhưng chỉ trong IE. Tôi đã thử nghiệm nó trong IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Tôi đặt một <br>thẻ vào một <span>thẻ và đã có thể sử dụng display:none;trên <span>để kiểm soát khi không sử dụng các <br>thẻ sử dụng Media Queries.

câu hỏi cũ nhưng đây là một sửa chữa khá gọn gàng và sạch sẽ, có thể được sử dụng cho những người vẫn đang tự hỏi nếu nó có thể :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

với sửa lỗi này, bạn cũng có thể xóa BR trên các trang web (chỉ cần đặt chiều rộng thành 0px)

Tại sao không sử dụng thẻ HR? Nó được làm chính xác cho những gì bạn muốn. Kiểu như cố gắng làm một cái nĩa để ăn súp khi có một cái muỗng ngay trước mặt bạn trên bàn.