0

改行<br> を文字に置き換えるソリューションを探しています。カンマとしましょう。

画像のクレジットを表示する Web サイトを持っています。横向きモードでは、クレジットは次のように表示されます。

タイトル
アーティスト
年

縦向きモードでは、次のように表示されます。

タイトル、アーティスト、年

これまでのところ、私はこの解決策を見つけました.Safari、iosおよびchromeのsafariで動作します（androidでchromeをテストしていませんが、動作するはずです）：

最初に空のコンテンツを設定して改行を削除します

br {content: '';}

次に、改行を置き換える文字列を設定します

br:after {content: ', ';)

正常に機能するために改行が必要な場合は、再び配置します

br {content:none;}

実際にはうまく機能しますが、これを行う正しい方法ですか? cssで改行を文字に置き換えるにはどうすればよいですか? cms のエンド ユーザーがクレジットを入力するときに、あまり多くの html コードを追加する必要がないソリューションを探しています。

4

2 に答える 2

1 

/* cross browser inline-block */
p br {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

/* replace <br> with comma */

p br {
  content: '';
  width: 9px;
  height: 18px;
}

p br:before {
  content: ', '
}
<p>some<br />text with &lt;br&gt;</p>

モバイル Chrome 40.0.2214.89、Chrome 40.0.2214.95、Opera 12.16、Safari 7.0.4 で動作します

Firefox 35.0.1 および Internet Explorer 11 では機能しません

于 2015-02-05T11:34:22.873 に答える