đầu ra:

xin chào
Bạn khỏe không

mã:

<p>hello <br> How are you </p>

Làm thế nào để đạt được cùng một đầu ra mà không cần <br>?

Không thể có cùng cấu trúc HTML, bạn phải có một cái gì đó để phân biệt giữa Hellovà How are you.

Tôi đề nghị sử dụng spans mà sau đó bạn sẽ hiển thị dưới dạng các khối (giống như <div>thực tế).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Bạn có thể sử dụng white-space: pre;để làm cho các yếu tố hoạt động như thế <pre>, mà bảo tồn các dòng mới. Thí dụ:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Lưu ý cho IE rằng điều này chỉ hoạt động trong IE8 +.

Sử dụng <br/>như bình thường, nhưng ẩn nó display: nonekhi bạn không muốn.

Tôi hy vọng hầu hết mọi người tìm thấy câu hỏi này muốn sử dụng thiết kế css / responsive để quyết định xem có ngắt dòng xuất hiện ở một nơi cụ thể hay không. (và không có bất cứ điều gì cá nhân chống lại <br/>)

Mặc dù không rõ ràng ngay lập tức, nhưng bạn thực sự có thể áp dụng display:nonecho một <br/>thẻ để ẩn nó, điều này cho phép sử dụng các truy vấn phương tiện song song với các thẻ BR ngữ nghĩa.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

Điều này rất hữu ích trong thiết kế đáp ứng khi bạn cần buộc văn bản thành hai dòng tại một điểm ngắt chính xác.

http://jsfiddle.net/nNbD3/1/

Có một số tùy chọn để xác định việc xử lý khoảng trắng và ngắt dòng. Nếu một người có thể đặt nội dung vào ví dụ như một <p>thẻ, thì khá dễ dàng để có được bất cứ thứ gì họ muốn.

Để bảo toàn ngắt dòng nhưng không sử dụng khoảng trắng, hãy sử dụng pre-line(không pre) như trong:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Nếu muốn có một hành vi khác, hãy chọn một trong những hành vi này (WS = WhiteSpace, LB = LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

NGUỒN: Trường W3

Lệnh "\ a" trong CSS tạo ra lợi nhuận vận chuyển. Đây là CSS, không phải HTML, vì vậy nó sẽ gần hơn với những gì bạn muốn: không đánh dấu thêm .

Trong một blockquote, ví dụ bên dưới hiển thị cả tiêu đề và liên kết nguồn và phân tách hai cái bằng trả về vận chuyển ( "\a"):

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

Tại CSS sử dụng mã

p {
    white-space: pre-line;
}

Với mã này css, mỗi lần nhập bên trong thẻ P sẽ là một dòng ngắt tại html.

Dựa trên những gì đã nói trước đây, đây là một giải pháp CSS thuần túy hoạt động.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

HOẶC LÀ

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

nguồn: https://stackoverflow.com/a/36191199/2377343

Để làm cho một phần tử có một ngắt dòng sau đó, gán nó:

display:block;

Các phần tử không nổi sau phần tử mức khối sẽ xuất hiện trên dòng tiếp theo. Nhiều phần tử, chẳng hạn như <p> và <div> đã là các phần tử mức khối để bạn chỉ có thể sử dụng các phần tử đó.

Nhưng trong khi điều này là tốt để biết, điều này thực sự phụ thuộc nhiều hơn vào bối cảnh nội dung của bạn. Trong ví dụ của bạn, bạn sẽ không muốn sử dụng CSS để buộc ngắt dòng. <br /> là phù hợp vì về mặt ngữ nghĩa, thẻ p là phù hợp nhất cho văn bản bạn đang hiển thị. Thêm đánh dấu chỉ để treo CSS nó là không cần thiết. Về mặt kỹ thuật, đây không chính xác là một đoạn văn, nhưng không có thẻ <hello>, vì vậy hãy sử dụng những gì bạn có. Mô tả nội dung của bạn tốt với HTMl là cách quan trọng hơn - sau khi bạn có được điều đó thì hãy tìm ra cách làm cho nó trông thật đẹp.

Đây là một giải pháp tồi cho một câu hỏi tồi, nhưng một câu trả lời đúng theo nghĩa đen:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Đối với một danh sách các liên kết

Các câu trả lời khác cung cấp một số cách tốt để thêm ngắt dòng, tùy thuộc vào tình huống. Nhưng cần lưu ý rằng :afterbộ chọn là một trong những cách tốt hơn để làm điều này để kiểm soát CSS đối với danh sách các liên kết (và những thứ tương tự), vì những lý do được ghi chú dưới đây.

Đây là một ví dụ, giả sử một bảng nội dung:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Và đây là kỹ thuật của Simon_Weaver, đơn giản hơn và tương thích hơn. Nó không tách biệt phong cách và nội dung nhiều, đòi hỏi nhiều mã hơn và có thể có trường hợp bạn muốn thêm dấu ngắt sau thực tế. Vẫn là một giải pháp tuyệt vời, đặc biệt là đối với IE cũ.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Lưu ý ưu điểm của các giải pháp trên:

• Bất kể khoảng trắng trong HTML, đầu ra đều giống nhau (so với pre)
• Không có phần đệm thêm nào được thêm vào các yếu tố (xem display:blockbình luận của NickG )
• Bạn có thể dễ dàng chuyển đổi giữa danh sách liên kết ngang và dọc với một số CSS được chia sẻ mà không cần truy cập vào mọi tệp HTML để thay đổi kiểu
• Không floathoặc clearphong cách ảnh hưởng đến nội dung xung quanh
• Phong cách tách biệt với nội dung (so với <br/>hoặc prevới các ngắt mã hóa cứng)
• Điều này cũng có thể làm việc cho các liên kết lỏng bằng cách sử dụng a.toc:aftervà<a class="toc">
• Bạn có thể thêm nhiều dấu ngắt và thậm chí cả văn bản tiền tố / hậu tố

Có lẽ ai đó sẽ có cùng một vấn đề như tôi:

Tôi đã ở trong một yếu tố với display: flexvì vậy tôi phải sử dụng flex-direction: column.

Đặt brthẻ thành display: nonehữu ích, nhưng sau đó bạn có thể kết thúc bằng WordsRunTogether. Tôi đã thấy hữu ích hơn khi thay thế nó bằng một nhân vật không gian, như vậy:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Làm thế nào về <pre>thẻ?

nguồn: http://www.w3schools.com/tags/tag_pre.asp

Bạn có thể thêm rất nhiều phần đệm và buộc văn bản được chia thành dòng mới, ví dụ

p{
    padding-right: 50%;
}

Làm việc tốt với tôi trong một tình huống với thiết kế đáp ứng, trong đó chỉ trong một phạm vi chiều rộng nhất định, văn bản cần được phân chia.

Tôi thích các giải pháp rất đơn giản, đây là một giải pháp nữa

<p>hello <span>How are you</span></p>

và css

p {
 display: flex;
 flex-direction: column;
}

Sử dụng overflow-quấn: break-word; giống :

.yourelement{
overflow-wrap: break-word;
}

Bạn cần khai báo nội dung bên trong <span class="class_name"></span>. Sau đó, dòng sẽ bị phá vỡ.

\A có nghĩa là ký tự nguồn cấp dữ liệu.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Cả hai câu trả lời của Vincent Robert và Joey Adams đều hợp lệ. Tuy nhiên, nếu bạn không muốn thay đổi đánh dấu, bạn chỉ cần chèn một<br /> javascript bằng cách sử dụng.

Không có cách nào để làm điều đó trong CSS mà không thay đổi đánh dấu.

Trong trường hợp của tôi, tôi cần một nút đầu vào để ngắt dòng trước nó.
Tôi đã áp dụng kiểu sau cho nút và nó hoạt động:

clear:both;

Trong trường hợp điều này giúp ai đó ...

Bạn có thể làm điều này:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Với css này:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

Sử dụng  thay vì không gian sẽ ngăn chặn một phá vỡ.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Điều này hoạt động trong Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Tôi đoán bạn không muốn sử dụng điểm dừng vì nó sẽ luôn phá vỡ dòng. Đúng không? Nếu vậy, làm thế nào về việc thêm một điểm dừng <br />trong văn bản của bạn, sau đó cung cấp cho nó một lớp giống như <br class="hidebreak"/>sau đó sử dụng truy vấn phương tiện ngay trên kích thước bạn muốn nó phá vỡ để ẩn <br />để nó phá vỡ ở một chiều rộng cụ thể nhưng vẫn nằm trên chiều rộng đó.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Thiết kế / o71yw5vd /

Mã có thể là

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS sẽ là

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

Đừng. Nếu bạn muốn ngắt dòng cứng, sử dụng một.