web-dev-qa-db-ja.com

<br />を使用せずにcssから改行する方法は？

出力：


お元気ですか

コード： 

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

<br>なしで同じ出力を得るにはどうすればいいですか？

htmlcsscss3
344
Jitendra Vyas

同じHTML構造では不可能なので、HelloとHow are youを区別する何かが必要です。

spansを使用してブロックとして表示することをお勧めします（実際の<div>と同じように）。

HTML：

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

CSS：

p span 
{
    display: block;
}
341
Vincent Robert

white-space: pre;を使用して、要素を<pre>のように機能させることができます。これにより、改行が保持されます。例：

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

これはIE 6またはIE 7では機能しないことに注意してください。私はIE8について知りません。

292
Joey Adams

通常どおり<br/>を使用しますが、必要ない場合はdisplay: noneで非表示にします。

この質問を見つけた人の大半は、CSS /レスポンシブデザインを使用して、特定の場所に改行が表示されるかどうかを判断したいと思います。 （そして<br/>に対して個人的なことはしないでください）

すぐにはわかりませんが、実際にdisplay:noneを<br/>タグに適用してそれを隠すことができます。これにより、メディアクエリをセマンティック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)
    }
 }

これは、テキストを正確に分割して2行にする必要があるレスポンシブデザインに役立ちます。

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

105
Simon_Weaver

空白と改行の処理を定義するためのいくつかのオプションがあります。コンテンツを例えば<p>タグを使えば、欲しいものが手に入ります。

改行を保持し、空白を保持しない の場合は、次のようにpre-line（preではなく）を使用します。

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

<p>hello
How are you</p>

別の動作が必要な場合は、次のいずれかを選択します（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 */

出典：W3学校

88
petermeissner

CSSの "\ a" コマンドはキャリッジリターンを生成します。これはCSSであり、HTMLではないので、あなたが望むものにもっと近いものになるでしょう： 余分なマークアップなし 。

ブロック引用では、以下の例はタイトルとソースリンクの両方を表示し、キャリッジリターン（"\a"）で両者を分離します。

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

以前に言われたことに基づいて、これはうまくいく純粋なCSSソリューションです。

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

CSSでコードを使う

p {
    white-space: pre-line;
}

このコードcssを使用すると、Pタグ内のすべての入力はHTMLでのブレークラインになります。

27
burunoh

後で要素に改行を入れるには、それを割り当てます：

display:block;

ブロックレベルの要素の後の非浮動要素は、次の行に表示されます。 <p>や<div>などの多くの要素はすでにブロックレベルの要素であるため、それらを使用するだけです。

しかし、これは知っておくと良いことですが、これはコンテンツのコンテキストにより依存します。この例では、CSSを使用して強制的に改行をしたくないでしょう。 <br />が適切なのは、表示するテキストに意味的にpタグが最も適しているためです。 CSSをオフにするだけの追加のマークアップは不要です。技術的にはexactlyパラグラフではありませんが、<greeting>タグがないため、使用しているものを使用してください。 HTMlを使用してコンテンツを適切に記述することは、より重要です。それができたら、then見栄えを良くする方法を見つけてください。

9
Syntax Error
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

OR

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

ソース： https://stackoverflow.com/a/36191199/2377343

8
T.Todua

これは悪い質問に対する悪い解決策ですが、文字通り概要を満たすものです。

p {
    width : 12ex;
}

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

リンクリスト

他の答えは状況に応じて、改行を追加するためのいくつかの良い方法を提供します。しかし、:afterセレクタはリンクリストのCSS制御（そして同様のこと）のためにこれを行うためのより良い方法の1つであることに注意すべきです。

これは目次を想定した例です。

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

そしてこれがSimon_Weaverの手法です。これはより単純でより互換性があります。それはスタイルと内容をそれほど分けません、より多くのコードを必要とします、そしてあなたが事実の後に休憩を追加したい場合があるかもしれません。それでもなお、特に古い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>

上記のソリューションの利点に注意してください。

  • HTMLの空白に関係なく、出力は同じです（preに対して）。
  • 追加のパディングは要素に追加されません（NickGのdisplay:blockコメントを参照）
  • スタイルを変更するためにすべてのHTMLファイルにアクセスすることなく、共有CSSを使用してリンクの水平方向と垂直方向のリストを簡単に切り替えることができます。
  • 周囲のコンテンツに影響を与えるfloatまたはclearスタイルはありません
  • スタイルはコンテンツとは異なります（<br/>、またはハードコーディングされた改行付きのpreに対して）。
  • これはa.toc:afterと<a class="toc">を使った緩いリンクにも使えます。
  • 複数の切れ目を追加したり、プレフィックス/サフィックスのテキストを追加することもできます
5
Beejor

brタグをdisplay: noneに設定すると便利ですが、その場合はWordsRunTogetherを使用することになります。私はそれをスペース文字で置き換えることがより有用であることがわかりました。

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

多分誰かが私と同じ問題を抱えているでしょう：

私はdisplay: flexを持つ要素の中にいたので、flex-direction: columnを使わなければなりませんでした。

4
Dorian

<pre>タグはどうですか。

ソース： http://www.w3schools.com/tags/tag_pre.asp

3
stephan

たくさんのパディングを追加して、テキストを強制的に改行することができます。

p{
    padding-right: 50%;
}

レスポンシブデザインの状況ではうまくいきました。テキストを分割するには特定の幅の範囲内でのみ必要でした。

2
Alexxandar

スペースの代わりに&nbsp;を使用すると、改行を防ぐことができます。

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

これが誰かに役立つ場合は...

あなたはこれをすることができます：

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

このCSSで：

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

これはChromeで動作します。

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

Overflow-wrap：break-Wordを使用してください。好きです：

.yourelement{
overflow-wrap: break-Word;
}
0
Den Pat

私の場合、改行する前に入力ボタンが必要でした。
ボタンに次のスタイルを適用しましたが、うまくいきました。

clear:both;
0
Gene Bo

私はあなたがブレークポイントを使うことを望まなかったと思います。あれは正しいですか？もしそうなら、テキストにブレークポイント<br />を追加し、それに<br class="hidebreak"/>のようなクラスを与え、それからサイズを超えてメディアクエリを使用して<br />を隠し、特定の幅でブレークしますがその幅より上にインラインで留まります。

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

0
Krankit

私は非常に単純な解決策が好きです、これがもう一つです

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

そしてcss

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

<span class="class_name"></span>内でコンテンツを宣言する必要があります。それが終わったら改行します。

\Aは改行文字を意味します。

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

Vincent RobertとJoey Adamsの両方の回答が有効です。あなたがしたくない場合は、しかし、マークアップを変更し、あなただけのJavaScriptを使用して<br />を挿入することができます。

マークアップを変更せずにCSSでそれを行う方法はありません。

0
e-satis