wynik:

Witaj
Jak się masz

kod:

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

Jak osiągnąć taką samą wydajność bez <br>?

Niemożliwe z tej samej struktury HTML, trzeba mieć coś do odróżniania Helloi How are you.

Sugeruję użycie spans, które następnie wyświetlisz jako bloki (tak jak w <div>rzeczywistości).

p span {
  display: block;
}

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

Możesz użyć, white-space: pre;aby elementy zachowywały się tak <pre>, co zachowuje nowe linie. Przykład:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Uwaga dla IE, że działa to tylko w IE8 +.

Używaj <br/>jak zwykle, ale ukrywaj go, display: nonegdy nie chcesz.

Spodziewałbym się, że większość osób, które znajdą to pytanie, będzie chciała skorzystać z projektu css / responsive, aby zdecydować, czy podział linii pojawi się w określonym miejscu. (i nie mam nic osobistego przeciwko <br/>)

Choć nie od razu oczywiste, rzeczywiście można zastosować display:nonedo <br/>tagu, aby ją ukryć, co umożliwia korzystanie z zapytaniami mediów w tandemie z semantycznych znaczników BR.

 <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)
    }
 }

Jest to przydatne w responsywnym projektowaniu, w którym trzeba wymusić tekst w dwóch liniach przy dokładnym zerwaniu.

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

Istnieje kilka opcji definiowania obsługi białych znaków i podziałów linii. Jeśli umieścisz treść np. W <p>tagu, bardzo łatwo jest zdobyć to, czego chcesz.

Aby zachować podział linii, ale nie spacje, użyj pre-line(nie pre) jak w:

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

<p>hello
How are you</p>

Jeśli pożądane jest inne zachowanie, wybierz jedno z nich (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 */

ŹRÓDŁO: Szkoły W3

Polecenie „\ a” w CSS generuje powrót karetki. To jest CSS, a nie HTML, więc powinno być bliżej tego, czego chcesz: bez dodatkowych znaczników .

W cytacie blokowym poniższy przykład wyświetla zarówno tytuł, jak i link źródłowy i oddziela je za pomocą znaku powrotu karetki ( "\a"):

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

W CSS użyj kodu

p {
    white-space: pre-line;
}

Z tym kodem css każde wpisanie wewnątrz znacznika P będzie linią przerywającą w html.

Opierając się na tym, co zostało powiedziane wcześniej, jest to czyste rozwiązanie CSS, które działa.

<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> <--------------------------------------

LUB

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

źródło: https://stackoverflow.com/a/36191199/2377343

Aby element miał potem podział linii, przypisz go:

display:block;

Elementy nie pływające po elemencie poziomu bloku pojawią się w następnym wierszu. Wiele elementów, takich jak <p> i <div>, jest już elementami na poziomie bloku, więc możesz ich po prostu użyć.

Ale chociaż warto to wiedzieć, tak naprawdę zależy to bardziej od kontekstu treści. W twoim przykładzie nie chcesz używać CSS do wymuszania podziału linii. <br /> jest odpowiedni, ponieważ semantycznie znacznik p jest najbardziej odpowiedni dla wyświetlanego tekstu. Więcej znaczników, aby zawiesić CSS, nie jest konieczne. Z technicznego punktu widzenia nie jest to dokładnie akapit, ale nie ma znacznika <greeting>, więc użyj tego, co masz. Opisując zawartość dobrze z HTML jest bardziej ważne - po masz który następnie dowiedzieć się, jak zrobić to ładny wygląd.

Oto złe rozwiązanie złego pytania, ale takie, które dosłownie odpowiada skrócie:

p {
    width : 12ex;
}

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

Aby uzyskać listę linków

Inne odpowiedzi dostarczają dobrych sposobów dodawania podziałów linii, w zależności od sytuacji. Należy jednak zauważyć, że :afterselektor jest jednym z lepszych sposobów, aby to zrobić dla kontroli CSS nad listami linków (i podobnych rzeczy), z powodów wymienionych poniżej.

Oto przykład, zakładając spis treści:

<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>

A oto technika Simon_Weaver, która jest prostsza i bardziej kompatybilna. Nie rozdziela tak bardzo stylu i treści, wymaga więcej kodu i mogą wystąpić przypadki, w których chcesz dodać przerwy po fakcie. Jednak wciąż świetne rozwiązanie, szczególnie dla starszych IE.

<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>

Zwróć uwagę na zalety powyższych rozwiązań:

• Bez względu na białe znaki w kodzie HTML, wynik jest taki sam (vs. pre)
• Do elementów nie jest dodawana dodatkowa wyściółka (patrz display:blockkomentarze NickG )
• Możesz łatwo przełączać się między poziomymi i pionowymi listami linków za pomocą współdzielonego CSS bez konieczności przechodzenia do każdego pliku HTML w celu zmiany stylu
• Nie floatlubclear style wpływające na otaczającą zawartość
• Styl jest niezależny od treści (vs. <br/>lubpre z zakodowane przerwami)
• Może to również działać w przypadku luźnych linków za pomocą a.toc:afteri<a class="toc">
• Możesz dodać wiele podziałów, a nawet tekst prefiksu / sufiksu

Może ktoś będzie miał taki sam problem jak ja:

Byłem w elemencie, display: flexwięc musiałem użyć flex-direction: column.

Ustawienie brtagu nadisplay: none jest pomocne, ale wtedy możesz skończyć z WordsRunTogether. Uważam, że bardziej pomocne jest zastąpienie go spacją, na przykład:

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: ' ';}
}

Co powiesz na <pre>tag?

źródło: http://www.w3schools.com/tags/tag_pre.asp

Możesz na przykład dodać dużo dopełnienia i wymusić podział tekstu do nowej linii

p{
    padding-right: 50%;
}

Działa mi dobrze w sytuacji responsywnego projektu, w którym tylko w określonym zakresie szerokości trzeba było podzielić tekst.

Lubię bardzo proste rozwiązania, oto jeszcze jedno

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

i css

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

Użyj przepełnienia: zawiń słowo; lubić :

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

Musisz zadeklarować treść <span class="class_name"></span>. Po tym linia zostanie przerwana.

\A oznacza znak nowego wiersza.

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

Zarówno Vincent Robert, jak i Joey Adams są prawidłowe. Jeśli nie chcesz jednak zmieniać znaczników, możesz po prostu wstawić<br /> skrypt JavaScript.

Nie można tego zrobić w CSS bez zmiany znaczników.

W moim przypadku potrzebowałem przycisku wprowadzania, aby uzyskać podział linii przed nim.
Zastosowałem następujący styl do przycisku i zadziałało:

clear:both;

Jeśli to pomoże komuś ...

Możesz to zrobić:

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

Dzięki temu css:

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

Używanie  zamiast spacji zapobiegnie przerwie.

<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>

Działa to w Chrome:

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

Zgaduję, że nie chciałeś użyć punktu przerwania, ponieważ zawsze spowoduje to przerwanie linii. Czy to jest poprawne? Jeśli tak, to jak dodać punkt przerwania <br />w tekście, a następnie nadać mu taką klasę, jak <br class="hidebreak"/>za pomocą zapytania o media tuż powyżej rozmiaru, który chcesz przerwać, aby ukryć<br /> aby łamał się na określonej szerokości, ale pozostaje w linii powyżej tej szerokości.

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/517Design/o71yw5vd/

Kod może być

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

Byłoby CSS

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

Nie rób Jeśli chcesz twardego podziału linii, użyj jednego.