p {
  white-space: pre;
}

<p>hello 
How are you</p>

Antwoord 3, autoriteit 32%

Gebruik <br/>zoals normaal, maar verberg het met display: noneals je het niet wilt.

Ik zou verwachten dat de meeste mensen die deze vraag vinden css / responsief ontwerp willen gebruiken om te beslissen of een regeleinde op een specifieke plaats verschijnt. (en heb niets persoonlijks tegen <br/>)

Hoewel niet direct voor de hand liggend, kunt u display:nonedaadwerkelijk toepassen op een <br/>-tag om deze te verbergen, wat het gebruik van mediaquery’s in tandem met semantische BR-tags.

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

Dit is handig bij responsief ontwerp waarbij u tekst in twee regels moet forceren met een exacte onderbreking.

jsfiddle-voorbeeld

Antwoord 4, autoriteit 29%

Er zijn verschillende opties om de verwerking van spaties en regeleinden te definiëren.
Als men de inhoud in b.v. een <p>-tag is het vrij eenvoudig om te krijgen wat je maar wilt.

Voor het behouden van regeleinden maar geen spatiesgebruik pre-line(niet pre) zoals in:

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

Als een ander gedrag gewenst is, kies dan uit een van deze (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 */

BRON: W3-scholen

Antwoord 5, autoriteit 15%

De opdracht “\a”in CSS genereert een regelterugloop. Dit is CSS, geen HTML, dus het komt dichter bij wat u wilt: geen extra opmaak.

In een blokcitaat toont het onderstaande voorbeeld zowel de titel als de bronlink en scheidt de twee met een regelterugloop ("\a"):

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

Antwoord 6, autoriteit 7%

Gebruik bij de CSS de code

p {
    white-space: pre-line;
}

Met deze code css is elke invoer in de P-tag een breeklijn in de html.

Antwoord 7, autoriteit 7%

Voortbouwend op wat eerder is gezegd, is dit een pure CSS-oplossing die werkt.

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

Antwoord 8, autoriteit 2%

Om een element achteraf een regeleinde te geven, wijs het toe:

display:block;

Niet-zwevende elementen na een blokniveau-element verschijnen op de volgende regel. Veel elementen, zoals <p> en <div> zijn al blokniveau-elementen, dus je kunt die gewoon gebruiken.

Maar hoewel dit goed is om te weten, hangt dit meer af van de context van uw inhoud. In uw voorbeeld zou u CSS niet willen gebruiken om een regeleinde te forceren. De <br /> is geschikt omdat de p-tag semantisch het meest geschikt is voor de tekst die u weergeeft. Meer opmaak om CSS eraf te hangen is niet nodig. Technisch gezien is het niet precieseen alinea, maar er is geen <begroeting> tag, dus gebruik wat je hebt. Het is veel belangrijker om je inhoud goed te beschrijven met HTML – nadat je dat hebt gedaan, en danbedenk hoe je het er mooi uit kunt laten zien.

Antwoord 9, autoriteit 2%

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

OF

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

bron: https://stackoverflow.com/a/36191199/2377343

Antwoord 10, autoriteit 2%

Hier is een slechte oplossing voor een slechte vraag, maar wel een die letterlijk beantwoordt aan de opdracht:

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

Antwoord 11

Misschien heeft iemand hetzelfde probleem als ik:

Ik zat in een element met display: flexdus ik moest flex-direction: columngebruiken.

Antwoord 12

Voor een lijst met links

De andere antwoorden bieden een aantal goede manieren om regeleinden toe te voegen, afhankelijk van de situatie. Maar het moet worden opgemerkt dat de :after-selector een van de betere manieren is om dit te doen voor CSS-controle over lijsten met links(en soortgelijke dingen), om redenen die hieronder worden vermeld .

Hier is een voorbeeld, uitgaande van een inhoudsopgave:

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

En hier is de techniek van Simon_Weaver, die eenvoudiger en compatibeler is. Het scheidt stijl en inhoud niet zo veel, vereist meer code en er kunnen gevallen zijn waarin u achteraf pauzes wilt toevoegen. Nog steeds een geweldige oplossing, vooral voor oudere 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>

Let op de voordelen van de bovenstaande oplossingen:

• Ongeacht de witruimte in de HTML, de uitvoer is hetzelfde (vs. pre)
• Er wordt geen extra opvulling aan de elementen toegevoegd (zie NickG’s display:blockopmerkingen)
• Je kunt gemakkelijk schakelen tussen horizontale en verticale lijsten met links met wat gedeelde CSS zonder in elk HTML-bestand te gaan voor een stijlwijziging
• Geen floatof clearstijlen die de omringende inhoud beïnvloeden
• De stijl staat los van de inhoud (vs. <br/>, of premet hardgecodeerde pauzes)
• Dit kan ook werken voor losse links met behulp van a.toc:afteren <a class="toc">
• Je kunt meerdere pauzes en zelfs prefix/suffix tekst toevoegen

Antwoord 13

Een brtag instellen op display: noneis handig, maar dan kun je eindigen met WordsRunTogether. Ik vond het handiger om het in plaats daarvan te vervangen door een spatie, zoals:

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

Antwoord 14

Gebruik overflow-wrap: break-word; zoals :

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

Antwoord 15

Hoe zit het met de <pre>-tag?

bron: http://www.w3schools.com/tags/tag_pre.asp

Antwoord 16

Ik hou van heel eenvoudige oplossingen, hier is er nog een

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

en css

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

Antwoord 17

U kunt een heleboel van opvulling en de kracht tekst toe te voegen aan split aan nieuwe lijn zijn, bijvoorbeeld

p{
    padding-right: 50%;
}

Werkte prima voor mij in een situatie met responsive design, waar slechts binnen een bepaalde breedte bereik dat nodig was voor de tekst te splitsen zijn.

Antwoord 18

U moet de inhoud binnen <span class="class_name"></span>. Na het zal de lijn pauze.

\Amiddel lijnvoedingskarakter.

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

Antwoord 19

Zowel Vincent Robert en Joey Adams antwoorden zijn geldig. Als u niet wilt, echter, veranderen de markup, kunt u plaatst u gewoon een <br />met behulp van javascript

Er is geen manier om het te doen in CSS zonder de opmaak.

Antwoord 20

In mijn geval moest ik een input-knop om een ​​lijn pauze te hebben voordat het.
Ik paste de volgende stijl naar de knop en het werkte:

clear:both;

Antwoord 21

In het geval helpt dit iemand …

U kunt dit doen:

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

Met deze css:

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

Antwoord 22

Het gebruik van  in plaats van spaties voorkomt een pauze.

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

Antwoord 23

Dit werkt in Chrome:

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

Antwoord 24

Ik neem aan dat je geen breekpunt wilde gebruiken, omdat het altijd de regel zal breken. Is dat correct? Zo ja, hoe zit het dan met het toevoegen van een breekpunt <br />in uw tekst, en dan een klasse te geven zoals <br class="hidebreak"/>en vervolgens te gebruiken mediaquery direct boven de grootte die u wilt verbreken om de <br />te verbergen, zodat deze op een specifieke breedte breekt, maar boven die breedte inline blijft.

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/

Antwoord 25

De code kan

. zijn

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

CSS zou zijn

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