Jak przełamać linię z css bez użycia <br />?

398

wynik:

Witaj
Jak się masz

kod:

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

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

Jitendra Vyas
źródło

Odpowiedzi:

385

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>

Vincent Robert
źródło
37
zauważ także, ile jest dodatkowego narzutu - <br />element istnieje z bardzo dobrego powodu. Jeśli chcesz podzielić linię, ponieważ są to osobne akapity, po prostu zaznacz je jako osobne akapity.
Rowland Shaw
8
Możesz potrzebować linii strukturalnych bez użycia akapitów. Aby na przykład oznaczyć wiersz, piosenkę lub adres
Vincent Robert
2
@VincentRobert Racja, ale wiersz jest kanonicznym przykładem tego, kiedy <br>jest właściwy znacznik. Zakresy wiersza byłyby „złe”.
Alan H.
8
Zauważ, że przypisanie display: block do elementu wymusi przerwanie linii przed i po, a więc wcale nie jest takie samo jak posiadanie jednego podziału linii.
jerseyboy
17
Zdecydowanie użyj elementów <p>. Element <span> NIE powinien zostać przekształcony w display: block, cały punkt <span> polega na tym, że jest on wbudowany. Zrobiłbym to w ten sposób: <div><p>hello</p> <p> Jak się masz </p> </div>. CSS nie wymaga żadnych poprawek.
Mil
353

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

Joey Adams
źródło
133
często lepiej niż prejest pre-line, co pozwala na owijanie.
Alan H.
14
Więcej informacji na temat różnic między wersją wstępną i wstępną na stronie developer.mozilla.org/en-US/docs/Web/CSS/white-space
Patrick
1
W moim przypadku wolałem pre, ponieważ mogę również użyć przepełnienia tekstu
Greg
Zauważ, że to nie zadziała z reakcją, ponieważ tekst jest ostatecznie pakowany i zostanie umieszczony w tej samej linii, co nie uruchomi white-spacereguły CSS.
Vadorequest
119

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/

Simon_Weaver
źródło
5
Simon, jesteś na miejscu - podany przez ciebie przykład jest dokładnym powodem, dla którego badałem to pytanie, a display: nonerozwiązanie jest zdecydowanie najbardziej odpowiednie i przydatne.
abbottjam
8
Zauważ, że w przypadkach, w których słowa mogłyby się ze sobą łączyć, możesz użyć czegoś takiego jak display: inline-block; width: 1em;zamiast none.
Beejor,
2
Możesz nawet zastosować klasę, <br class='foo'>jeśli potrzebujesz większej kontroli, ale nie zwariuj!
Simon_Weaver
Kolejne „dlaczego o tym nie pomyślałem ?!” odpowiedź. <br/>jest świetny w tym, co robi; nie trzeba wymyślać koła na nowo. Dzięki!
rinogo
Podobną koncepcję można zastosować do układu flex-box: stackoverflow.com/questions/29732575/…
Simon_Weaver
106

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

petermeissner
źródło
4
doskonały. powinna być wybrana odpowiedź.
Ben Lin
1
Uważam, że tego właśnie szuka OP.
John Sardinha
64

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)
}
David Latapie
źródło
Fantazyjne, ale zupełnie niepotrzebne z powodu pytania.
YePhIcK
15
+1, ponieważ zawiera tylko CSS i nie zaleca używania tagów pre, br ani zmiany trybu wyświetlania na blokujący (co dodaje inne zachowanie, może się zepsuć, jeśli rodzic jest włączony display:flexi dlatego jest włamaniem w tym kontekście). To naprawdę nie jest wyszukane, tylko nowoczesna technika. Jeśli chcesz dokładnie tego samego znacznika, ale tak naprawdę reagować inaczej, to jest właśnie to.
renoirb
Genialny pomysł. Uwaga "- nie używaj prostych cudzysłowów, 'ponieważ chcesz, aby \aparsowanie było traktowane jako znak specjalny.
Hafenkranich,
2
Chcę dać +1, ale to nie działa dla mnie na chromie 55
pery mimon
4
Głosowałbym za tym, gdyby był jakiś HTML i może Fiddle, aby pomóc w wizualizacji tego, co robisz.
John
29

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.

burunoh
źródło
1
Właśnie tego szukałem! Działa doskonale w przypadku zawartości elementu generowanej z JS (np. Wynik JSON z zapytania AJAX, forma schematu kątowego itp.), Która przechodzi przez ucieczkę / odkażanie (np. Normalne zachowanie ucieczki AngularJS, gdy nie używa się ngBindHtml)
Stefan Dragnev
28

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>
cruzanmo
źródło
Właśnie znalazłem odmianę tego podejścia, która jest pomocna w przypadku zdarzeń wskaźnika wieloliniowego input type='text', wrapping the input, and then laying the text over it with a wrapper div . That also requires : brak; `na :before, aby nadal móc kliknąć przycisk poniżej.
Eric Lease
10
<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

T.Todua
źródło
9

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.

Błąd składni
źródło
1
Ale to sprawia, że ​​jest to pełna szerokość pojemnika, co może być niepożądanym efektem ubocznym (szczególnie jeśli przedmiot jest kotwicą / łącznikiem).
NickG,
Tak, domyślnie elementy poziomu bloku zajmują pełną szerokość, chyba że ustawisz szerokość. Przeczytaj mój akapit o kontekście - myślenie w kategoriach kontekstu semantycznego zamiast wybierania kodu HTML na podstawie twojego projektu ogólnie pomaga uniknąć takich problemów.
Błąd składni
1
Często powód, dla którego należy unikać tagów <br>, jest bardziej techniczny niż semantyczny. Tagi <br> są samodzielne i nie zawsze możesz ich używać, ponieważ nie wiesz, czy elementy z przodu będą istnieć w czasie renderowania strony, więc możesz nie chcieć pustych linii. Rozważ listę <a> linków w pionowym menu, w której chcesz je wszystkie w osobnej linii, ale nie możesz użyć <br>, ponieważ nie wiesz, które linki zostaną ukryte z powodu reguł po stronie serwera. Ukrywanie linków spowodowałoby puste linie, gdyby użyto <br>.
NickG,
1
Z tego powodu ludzie często używają listy <ul>, a następnie chowają pociski, ale to dość hackerskie. Byłoby lepiej, gdyby istniała reguła css, która mówiła „zawsze renderuj we własnej linii”.
NickG,
1
Ale jak powiedziałem w moim pierwszym komentarzu - ma to niepożądany efekt uboczny polegający na tym, że elementy mają pełną szerokość :) Potrzebuję tylko elementów w nowej linii, bez ich pełnej szerokości. Jeśli element jest linkiem po lewej stronie, oznacza to nawet kliknięcia po prawej stronie ekranu za linkiem.
NickG,
8

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;
}
Danny Beckett
źródło
1
literówka lub co powinno exbyć? pi enie są tak blisko klawiatury, dlatego pytam
MMachinegun
1
Złe czy nie, jest to całkiem sprytne.
Jonathan Dumaine
5

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
Beejor
źródło
4

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.

dorycki
źródło
4

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: ' ';}
}
Bryan
źródło
2
Można również rozważyć wprowadzenie brdo display: inline-block; width: 1em;której należy zapobiec słowa z systemem razem gdy będzie pozioma.
Beejor,
1
Bardziej podoba mi się twoja sugestia. Spróbuję następnym razem, gdy to napotkam.
Bryan
3

Co powiesz na <pre>tag?

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

stephan
źródło
O! Rozumiem, co masz na myśli. Następnie używasz białych znaków, <pre>aby przełamać linię. Co jeśli chcesz mieć regularne białe znaki?
Micha Mazaheri,
Tag wstępny zinterpretuje wykonane zwroty karetki. Więc jeśli przekroczysz granicę między „witaj” a „jak się masz” we wstępnym tagu, przerwa zostanie renderowana
Godineau Félicie
2

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.

Alexxandar
źródło
1
Brzmi nieźle, ale zwiększenie wypełnienia zwiększy również ogólną szerokość obiektu. A to może mieć negatywny wpływ, szczególnie w przypadku strony responsywnej.
itsols
1

Lubię bardzo proste rozwiązania, oto jeszcze jedno

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

i css

p {
 display: flex;
 flex-direction: column;
}
Jarek
źródło
1

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

.yourelement{
overflow-wrap: break-word;
}
Den Pat
źródło
1

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;
}
Jacek Krawczyk
źródło
0

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.

e-satis
źródło
To nie jest dokładne. Można to wykorzystać :afterlub :beforezrobić.
Artur Bodera,
0

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;
Gene Bo
źródło
0

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: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}
Sójka
źródło
lub.on-new-line:before {content: ""; display: block;}
meuwka
0

Używanie &nbsp;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>
JPB
źródło
0

Działa to w Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}
Andi Giga
źródło
0

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/

Krankit
źródło
Właśnie zauważyłem, że Simon_Weaver opublikował odpowiedź podobną do mojej. Przepraszam Simon, nie próbował plagiatować twojej odpowiedzi. Nie przeczytałem wszystkich odpowiedzi przed opublikowaniem mojej i dlatego nie zauważyłem twojej. Moja zła ... lekcja się nauczyłam. Przeczytam inne odpowiedzi przed wysłaniem mojej w przyszłości.
Krankit
Bez obaw! Ale musisz napisać mi wiersz. From w3schools.com/tags/tag_br.asp "Tip: The <br> tag is useful for writing addresses or poems."
Simon_Weaver
0

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;
 }
szalony człowiek
źródło
-1

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

Rich Bradshaw
źródło
3
+1 Tak, ale jeśli nowa linia służy wyłącznie do prezentacji display: block;.
Web_Designer
21
Nie rozumiem, dlaczego ta odpowiedź otrzymała więcej głosów. Gdybym miał możliwość użycia twardego łamania linii, nie patrzyłbym na to pytanie.
trliner