CSSを使用して要素の前に改行を挿入する方法

170

CSS contentプロパティを使用して、要素の前に改行タグを挿入する方法を見たような気がします。明らかにこれは動作しません：

#restart:before { content: '<br/>'; }

しかし、どうやってこれを行うのですか？

css 
— 麻婆
ソース
2
CSSはコンテンツを追加または編集するためのものではなく、コンテンツの表示方法を制御するためのものです。
— トッドモーゼス
40
レイアウトとフロー（改行はどちらかと考えることができます）は間違いなくCSSのドメイン内にあるようです。
— 2013
12
CSSは、絶対にそれはあなたのテーマの一部であり、一貫性のあるスタイリング要素であるとき、コンテンツを追加または編集するため。特に、Wordpressなどのコンテンツ管理システムでは、コンテンツを編集できないため、非常に便利です。これが「コンテンツ」プロパティが存在する理由です。コンテンツの追加や編集に使用します。
— Fei Lauren

回答:

266

疑似要素で生成されたコンテンツで\A エスケープシーケンスを使用することが可能です。CSS2仕様で詳細を読んでください。

#restart:before { content: '\A'; }

に追加white-space:pre;する必要がある場合もあり#restartます。

注：\A行末を示します。

PS別の治療法 

:before { content: ' '; display: block; }
— 本棚
ソース
11
また、空白を試してください。テキストを折り返す場合。
— Jazzy 2013
6
鮮やかさ。ただし、これが機能するため#restartにはdisplay: inline;
— トロイアルフォード2013
23
これではうまくいきませんでした:before { content: ' '; display: block; }。
— Bogdanio 2015年
1
何らかの理由で、inline-block要素を処理するソリューションはありません。彼らは単に次の行に行きません。唯一の解決策は、実際<div></div>にHTMLに空を追加することでした。
— アダムレイス2016年
2
行が切れなかった場合は、 'white-space'プロパティを使用することができます：before {content： '\ A'; 空白：pre; }
— Amr 2016年
35

場合は#restart、インライン要素がある（例えば<span>、<em>など）あなたが使用してブロック要素にそれを回すことができます。

#restart { display: block; }

これにより、要素の前後の両方で改行が確実に行われます。

CSS に、要素の前ではなく改行のように機能するものを挿入する方法はありません。たとえばfloat: left、他の変更の副作用として、またはclear: leftフロートされた要素の後で、あるいはクレイジーなものでさえ、改行を引き起こす可能性がありますが#restart:before { content: 'a load of non-breaking spaces'; }、これは一般的なケースではおそらく良い考えではありません。

— ボビンス
ソース
1
display：blockにすることはできません。そのため、要素の幅を表示して、その背景がページ全体に表示されないようにする必要があります。要素の幅を自動設定できる必要があります。
— mheavers
3
float: left要素は、彼らがフィット収縮と新しい行で始めると、いくつかの使用であるかもしれません。そうでなければ、あなたが望むものは可能ではないかもしれません。
— ボビンス、2011
反対投票の原因開発者は、制御できない、または別のソリューションを適用する決定を下すことができない大きなプロジェクトで作業することがあります。
— eyurdakul 2014年
19

これは私にとってはうまくいきます：

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}
— ろくでなし
ソース
何らかの理由で、改行用のさまざまなUnicode文字が機能しませんでした。この解決策はトリックを果たしました-ありがとう！
— Gene Bo
1
はい、でもテキストをコンテンツ内に配置しなければならない場合はどうなりますか？回答
— サンダーズボリー2017年
11

次のCSSは私のために働きました：

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}
— rluks
ソース
プレーンなcssによる優れたアイデア
— NaveenDA
私の魅力として働いた。私はこれを使用しています：content: 'bar: \a' attr(data-description);
— ジミーアダロ2018
これは、正しい答え👍ある
— cronoklee
10

生成されたコンテンツをCSS経由で希望どおりに追加できない理由は2つあります。

  1. 生成されたコンテンツは、マークアップではなくコンテンツを受け入れます。マークアップは評価されず、表示のみされます。

  2. :beforeそして:after生成されたコンテンツは、そうもスペースや文字を追加したようにそれを定義、要素内に追加されますblock機能しません。

あります ::outside、あなたがやりたいかもしれない擬似要素が。ただし、ブラウザはサポートされていないようです。（詳細はこちら：http : //www.w3.org/TR/css3-content/#wrapping）

ここでは、jQueryを少し使用することをお勧めします。

$('<br />').insertBefore('#restart');

例： http : //jsfiddle.net/jasongennaro/sJGH9/1/

— ジェイソン・ジェンナーロ
ソース
「CSSの使用」。ジェシー・キンスマンの作品に似た答えを見つけました。
— RonnyKnoxville 2015年
4

はい、完全に実行可能ですが、それは間違いなく完全なハックです（そのようなコードを書くために人々があなたに汚い外観を与える可能性があります）。

HTMLは次のとおりです。

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

CSSは次のとおりです。

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

ここにフィドルがあります：http : //jsfiddle.net/AprNY/

— ハンマーブロスタイム
ソース
+1創造性のため。私は外部ソースから含めているものを持っていますが、実際のHTMLを変更することはできません...これは問題なく動作するようです:)ありがとうございます！
— 2013年
3

以下を試してください：

#restart::before {
  content: '';
  display: block;
}
— ユーザー
ソース
ヒント：少なくとも1行のコメントを追加すると、デフォルトで投稿がVLQQに表示されなくなります。
— Deduplicator
1

行の高さを20ピクセルにしたい場合

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }
— カリーム
ソース
1

：beforeでブレイクを挿入することはまったくできませんでした。私の解決策は、クラスにスパンを追加し、スパンの中にブレークを入れることでした。次に、表示するクラスを変更します。または表示：必要に応じてブロックします。

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

お役に立てれば。

— ロジャー
ソース
1

ドキュメントに<br>タグを入力し、他のタグと同じようにcss でタグをオン/オフにすることができます。

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
— ジャックハンマー
ソース
0

事前にエンコードされたHTMLエンティティを&#10;コンテンツの改行に使用することもでき、同じ効果が得られます。

— ヘンリー・ギブソン
ソース
0 
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 コンテンツプロパティ「改行」... pは、親ブロック内のpの終わりにマージンやパディングを追加しません（例：ボディ›セクション›） p）。"\ A"改行は、行間を強制します。同等のスタイルの行の高さ。

— マーク・スチュワート
ソース
-1

にを追加margin-top:20px;し#restartます。または、あなたが適切だと感じるどんなサイズのギャップでも。それがインライン要素である場合は、追加するdisplay:block必要display:inline-blockがあるか、私は思いませんがinline-block、IEの古いバージョンでは動作。

— パンクロック
ソース
要素の表示タイプがインラインブロックであることは問題ないので、要素の前に改行を入れる必要があります。
— mheavers
表示タイプはすでにインラインブロックです。contentプロパティを使用して、上記の質問を実行しようとしています。
— mheavers
contentプロパティを使用してhtml要素を追加することはできません。それは不可能です。
— punkrockbuddyholly
あなたの答えは彼の問題を解決しなかったでしょうから。contentプロパティ（html要素を受け入れない）を使用して改行を提供する方法の詳細については、優勝した回答をご覧ください。おそらくそれは元の質問の誤解だったのでしょう。
— pdwalker 14
-1

何らかの方法で改行を手動で追加する代わりにborder-bottom: 1px solid #ff0000、要素の境界線を取り、border-<side>指定した側のみをレンダリングする実装を行うことができます。

— andy4thehuynh
ソース
2
OPはで<br>はなく、同等のものを求めた<hr>。
— Beni Cherniavsky-Paskin
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.