Cách chèn ngắt dòng trước một phần tử bằng CSS

170

Tôi cảm thấy như tôi đã thấy một cách, sử dụng thuộc tính nội dung CSS, để chèn thẻ ngắt dòng trước một phần tử. Rõ ràng điều này không hoạt động:

#restart:before { content: '<br/>'; }

Nhưng làm thế nào để bạn làm điều này?

css

— máy nghiền
nguồn

2

CSS không phải để thêm hoặc chỉnh sửa nội dung, nó là để kiểm soát cách hiển thị nội dung.

— Todd Moses

40

Dường như với tôi rằng bố cục và luồng (ngắt dòng có thể được xem là một trong hai) chắc chắn nằm trong miền của CSS.

— Trevor

12

CSS hoàn toàn để thêm hoặc chỉnh sửa nội dung khi nó là một yếu tố kiểu dáng nhất quán là một phần của chủ đề của bạn. Đặc biệt với các hệ thống quản lý nội dung như Wordpress không cho phép bạn chỉnh sửa nội dung của mình, nó rất hữu ích. Đó là lý do tại sao tài sản "nội dung" tồn tại. Để thêm và / hoặc chỉnh sửa nội dung.

— Fei Lauren

266

Có thể sử dụng \A chuỗi thoát trong nội dung được tạo bởi phần tử psuedo. Đọc thêm trong thông số CSS2.

#restart:before { content: '\A'; }

Bạn cũng có thể cần phải thêm white-space:pre;vào #restart.

lưu ý: \Abiểu thị sự kết thúc của một dòng.

ps Một cách điều trị khác

:before { content: ' '; display: block; }

— bookcasey
nguồn

11

Cũng thử không gian trắng: bọc trước; nếu bạn muốn văn bản của bạn để bọc.

— Jazzy

6

Xuất sắc. Tuy nhiên, cần lưu ý rằng để điều này hoạt động - #restartcũng phải như vậydisplay: inline;

— Troy Alford

23

Điều này đã không làm việc cho tôi, tôi đã sử dụng :before { content: ' '; display: block; }thay thế.

— Bogdanio

1

Đối với một số lý do không có giải pháp nào làm việc với inline-blockcác yếu tố. Họ chỉ đơn giản là sẽ không đi vào dòng tiếp theo. Giải pháp duy nhất là thực sự nối thêm một khoảng trống <div></div>trong HTML.

— Adam Reis

2

Nếu dòng không bị hỏng, bạn có thể sử dụng thuộc tính 'khoảng trắng': trước {nội dung: '\ A'; khoảng trắng: trước; }

— Amr

35

Nếu #restartlà một yếu tố nội tuyến (ví dụ <span>, <em>vv) sau đó bạn có thể biến nó thành một yếu tố ngăn chặn sử dụng:

#restart { display: block; }

Điều này sẽ có tác dụng đảm bảo ngắt dòng cả trước và sau phần tử.

Không có cách nào để CSS chèn thứ gì đó hoạt động như ngắt dòng chỉ trước một phần tử chứ không phải sau đó. Bạn có thể có thể gây ra ngắt dòng trước đây như là một tác dụng phụ của các thay đổi khác, ví dụ float: left, hoặc clear: leftsau một yếu tố nổi, hoặc thậm chí là một thứ gì đó điên rồ như thế #restart:before { content: 'a load of non-breaking spaces'; }nhưng đây có lẽ không phải là một ý tưởng hay trong trường hợp chung.

— hoàng tử
nguồn

1

Nó không thể được hiển thị: chặn - bởi vì sau đó tôi sẽ cần hiển thị chiều rộng cho phần tử để giữ cho nền của nó không chạy suốt trang. Nó cần có khả năng tự động đặt chiều rộng cho phần tử.

— mapsvers

3

Một float: leftyếu tố có thể được sử dụng, vì chúng co lại để phù hợp và bắt đầu trên một dòng mới. Nếu không, những gì bạn muốn có thể không thể.

— hoàng tử

nguyên nhân bị hạ thấp đôi khi các nhà phát triển làm việc trong một dự án lớn nơi họ không có quyền kiểm soát hoặc không thể đưa ra quyết định áp dụng giải pháp khác.

— Eyurdakul

19

Điều này làm việc cho tôi:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— túp lều
nguồn

Vì một số lý do, các ký tự unicode khác nhau cho dòng mới không hoạt động với tôi ..? Giải pháp này đã làm được mẹo mặc dù - cảm ơn!

— Gene Bo

1

Có, nhưng điều gì xảy ra khi bạn cũng phải đặt văn bản bên trong nội dung!? Trả lời

— Sándor Zuboly

12

Chỉ cần đặt một ký tự dòng mới unicode trong phần tử giả trước:

#restart:before { content: '\00000A'; }

— Jesse Kinsman
nguồn

11

Theo dõi CSS làm việc cho tôi:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
nguồn

Ý tưởng tuyệt vời với css đơn giản

— NaveenDA

Làm việc như một cơ duyên cho tôi. Tôi đang sử dụng cái này:content: 'bar: \a' attr(data-description);

— Jimmy Adaro

Đây là câu trả lời đúng

— cronoklee

10

Có hai lý do khiến bạn không thể thêm nội dung được tạo qua CSS theo cách bạn muốn:

nội dung được tạo ra chấp nhận nội dung và không đánh dấu. Đánh dấu sẽ không được đánh giá mà chỉ hiển thị.
:beforevà :afternội dung được tạo được thêm vào trong phần tử, do đó, thậm chí thêm một khoảng trắng hoặc chữ cái và xác định nó là blocksẽ không hoạt động.

Có một ::outsideyếu tố giả có thể làm những gì bạn muốn. Tuy nhiên, dường như không có hỗ trợ trình duyệt. (Đọc thêm tại đây: http://www.w3.org/TR/css3-content/#wrapping )

Đặt cược tốt nhất là sử dụng một chút jQuery ở đây:

$('<br />').insertBefore('#restart');

Ví dụ: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Jason Gennaro
nguồn

"Sử dụng CSS". Tôi tìm thấy một câu trả lời tương tự như Jesse Kinsman đã làm việc.

— RonnyKnoxville

4

Vâng, hoàn toàn có thể làm được nhưng nó chắc chắn là một vụ hack hoàn toàn (mọi người có thể cho bạn vẻ ngoài bẩn thỉu khi viết mã như vậy).

Đây là HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Đây là CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Đây là câu đố: http://jsfiddle.net/AprNY/

— búa đập
nguồn

+1 Cho sự sáng tạo. Tôi đã có một cái gì đó mà tôi bao gồm từ một nguồn bên ngoài và không thể thay đổi HTML thực tế ... điều này dường như hoạt động tốt :) Cảm ơn!

— phản đối

3

Hãy thử như sau:

#restart::before {
  content: '';
  display: block;
}

— người sử dụng
nguồn

Mẹo: Thêm ít nhất một nhận xét một lớp, để các bài đăng của bạn không kết thúc trong VLQQ theo mặc định.

— Ded repeatator

1

giả sử bạn muốn chiều cao của dòng là 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— Kareem
nguồn

1

Tôi không có chút may mắn nào với việc nghỉ ngơi với: trước đây. Giải pháp của tôi là thêm một khoảng với một lớp và đặt dấu ngắt bên trong khoảng đó. Sau đó thay đổi lớp để hiển thị: none; hoặc hiển thị: chặn khi cần thiết.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

Hi vọng điêu nay co ich.

— Roger
nguồn

1

Bạn có thể điền tài liệu của mình bằng <br>các thẻ và bật chúng lên \ off với css giống như bất kỳ tài liệu nào khác:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— Jack Hammer
nguồn

0

Bạn cũng có thể sử dụng thực thể HTML được mã hóa trước để ngắt dòng 
trong nội dung của mình và nó sẽ có tác dụng tương tự.

— Henry Gibson
nguồn

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Nội dung Proerty, "newlines" ... p sẽ không thêm lề cũng như đệm ở cuối p trong khối cha mẹ (ví dụ: phần cơ thể cách ly p). "\ A" phá vỡ không gian dòng, chiều cao dòng tương đương.

— Mark Stewart
nguồn

-1

Thêm một margin-top:20px;để #restart. Hoặc bất kỳ khoảng cách kích thước bạn cảm thấy là phù hợp. Nếu đó là một yếu tố nội tuyến, bạn sẽ phải thêm display:blockhoặc display:inline-blockmặc dù tôi không nghĩ rằng nó inline-blockhoạt động trên các phiên bản IE cũ hơn.

— punkrockbuddyholly
nguồn

Không có vấn đề gì là kiểu hiển thị của phần tử là khối nội tuyến, vì vậy tôi cần nghỉ ngơi trước phần tử.

— mapsvers

kiểu hiển thị đã là khối nội tuyến. Tôi đang cố gắng làm những gì tôi yêu cầu ở trên, sử dụng thuộc tính nội dung.

— mapsvers

Bạn không thể thêm các phần tử html bằng cách sử dụng thuộc tính nội dung, điều đó là không thể.

— punkrockbuddyholly

bởi vì câu trả lời của bạn sẽ không giải quyết được vấn đề của anh ấy Nhìn vào câu trả lời chiến thắng trong đó nêu chi tiết một cách để cung cấp ngắt dòng bằng cách sử dụng thuộc tính nội dung (sẽ không chấp nhận các phần tử html). Có lẽ đó là một sự hiểu lầm của câu hỏi ban đầu.

— pdwalker

-1

Thay vì thêm thủ công ngắt dòng bằng cách nào đó, bạn có thể thực hiện border-bottom: 1px solid #ff0000sẽ lấy đường viền của phần tử và chỉ hiển thị border-<side>bất kỳ phía nào bạn chỉ định.

— andy4thehuynh
nguồn

2

OP yêu cầu tương đương <br>, không <hr>.

— Beni Cherniavsky-Paskin