Bỏ qua <br> với CSS?

Tôi đang làm việc trên một trang web có chèn ngắt dòng như <br>trong một số tiêu đề. Giả sử tôi không thể chỉnh sửa HTML nguồn, có cách nào với CSS tôi có thể bỏ qua những ngắt này không?

Tôi đang tối ưu hóa trang web trên thiết bị di động nên tôi không thực sự muốn sử dụng JavaScript.

Với css, bạn có thể "ẩn" các thẻ br và chúng sẽ không có tác dụng:

br {
    display: none;
}

Nếu bạn chỉ muốn ẩn một số trong một loại tiêu đề cụ thể, chỉ cần làm cho css của bạn cụ thể hơn.

h3 br {
    display: none;
}

Lưu ý: Giải pháp này chỉ hoạt động đối với các trình duyệt Webkit áp dụng sai phần tử giả cho các thẻ tự đóng.

Như một phụ lục cho các câu trả lời ở trên, cần lưu ý rằng trong một số trường hợp, người ta cần phải chèn một khoảng trắng thay vì chỉ bỏ qua <br>:

Ví dụ, các câu trả lời trên sẽ lần lượt

Monday<br>05 August

đến

Monday05 August

như tôi đã xác minh trong khi cố định dạng lịch sự kiện hàng tuần của mình. Khoảng trống sau "Thứ Hai" được ưu tiên để chèn. Điều này có thể được thực hiện dễ dàng bằng cách chèn những điều sau vào CSS:

br  {
    content: ' '
}
br:after {
    content: ' '
}

Điều này sẽ làm cho

Monday<br>05 August

trông giống như

Monday 05 August

Bạn có thể thay đổi contentthuộc tính br:afterthành ', 'nếu bạn muốn phân tách bằng dấu phẩy hoặc đặt bất kỳ thứ gì bạn muốn bên trong ' 'để làm cho nó thành dấu phân cách! Nhân tiện

Monday, 05 August

trông gọn gàng ;-)

Xem ở đây để tham khảo.

Như trong các câu trả lời ở trên, nếu bạn muốn làm cho thẻ cụ thể, bạn có thể. Như trong trường hợp bạn muốn thuộc tính này hoạt động cho thẻ <h3>, chỉ cần thêm h3mỗi thuộc tính trước brvà br:after, chẳng hạn.

Nó hoạt động chung nhất cho một thẻ giả.

Nếu bạn thêm vào phong cách

br{
    display: none;
}

Sau đó, điều này sẽ hoạt động. Tuy nhiên, không chắc liệu nó có hoạt động trong các phiên bản IE cũ hơn hay không.

Đây là cách tôi làm điều đó:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Bạn có thể sử dụng spancác phần tử thay vì brnếu bạn muốn phương thức khoảng trắng hoạt động, vì nó phụ thuộc vào các phần tử giả "không được xác định" cho các phần tử được thay thế.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

BẢN GIỚI THIỆU

Việc ngắt dòng chỉ đạt được bằng cách đặt phần tử nhịp thích hợp thành display:block.

Bằng cách sử dụng ID và / hoặc Lớp trong đánh dấu HTML của mình, bạn có thể dễ dàng nhắm mục tiêu mọi đơn lẻ hoặc kết hợp các phần tử span bằng CSS hoặc sử dụng các bộ chọn CSS như nth-child().

Vì vậy, bạn có thể xác định các điểm ngắt khác nhau bằng cách sử dụng các truy vấn phương tiện cho một bố cục đáp ứng.

Và bạn cũng có thể chỉ cần thêm / bớt / chuyển đổi các lớp bằng Javascript (jQuery).

“Ưu điểm” của phương pháp này là tính mạnh mẽ - hoạt động trên mọi trình duyệt hỗ trợ phần tử giả (xem: Tôi có thể sử dụng - Nội dung được tạo CSS ).

Thay vào đó, bạn cũng có thể thêm dấu ngắt dòng qua phần tử giả:

span.break:before {  
    content: "\A";
    white-space: pre;
}

BẢN GIỚI THIỆU

Đối với tôi trông đẹp hơn như thế này:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Đối với điều đó, bạn chỉ có thể làm như sau:

br{display: none;}

và nếu nó nằm bên trong một số thẻ PRE, thì bạn có thể và nếu bạn muốn thẻ PRE hoạt động như một phần tử khối thông thường, bạn có thể sử dụng CSS này:

pre {white-space: normal;}

Hoặc bạn có thể làm theo phong cách của Aneesh Karthik C như:

br  {content: ' '}
br:after {content: ' '}

Toi nghi ban da hieu

Theo câu hỏi của bạn, để giải quyết vấn đề này cho Firefox và Opera bằng Aneesh Karthik C phương pháp bạn cần thêm thuộc tính "float" right ".

Kiểm tra ví dụ ở đây. CSS này hoạt động trên Firefox (26.0), Opera (12.15), Chrome (32.0.1700) và Safari (7.0)

br {
   content: " ";  
   float:right; 
}

Tôi hy vọng điều này sẽ trả lời câu hỏi của bạn !!

Mặc dù câu hỏi này dường như đã được giải quyết, nhưng câu trả lời được chấp nhận không giải quyết được vấn đề cho tôi trên Firefox. Firefox (và có thể cả IE, mặc dù tôi chưa thử) bỏ qua khoảng trắng trong khi đọc nội dung của thẻ "content". Mặc dù tôi hoàn toàn hiểu tại sao Mozilla lại làm như vậy, nhưng nó cũng mang lại những vấn đề. Cách giải quyết đơn giản nhất mà tôi tìm thấy là sử dụng các khoảng trắng không thể ngắt thay vì các khoảng trắng thông thường như hình dưới đây.

.noLineBreaks br:before{
content: '\a0'
}

Hãy xem .

Có bạn có thể bỏ qua điều này <br> . Bạn có thể cần điều này đặc biệt trong trường hợp thiết kế đáp ứng, nơi bạn cần loại bỏ các dấu ngắt cho thiết bị di động.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

Ví dụ về CSS cho điện thoại di động

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Kiểm tra Codepen này:
https://codepen.io/fluidbrush/pen/pojGQyM

Bạn chỉ cần chuyển đổi nó trong một bình luận ..

Hoặc bạn có thể làm điều này:

br {
display: none;
}

Nhưng nếu bạn không muốn thì tại sao bạn lại đặt nó ở đó?