用字符/字符串替換<br>使用css？

我正在尋找一個解決方案，用一個字符替換換行符<br> ，讓我們來說一個逗號。用字符/字符串替換<br>使用css？

我有一個網站，顯示學分圖像。在橫向模式學分會顯示這樣的：

標題
藝術家
年

在縱向模式下應該顯示如下：

標題，藝術家，一年

所以遠遠我發現這個解決方案，在Safari瀏覽器，Safari瀏覽器爲ios和鉻（沒有在Android上測試過Chrome，但我猜它應該也可以）：

首先設置一個空的內容刪除換行符

br {content: '';}

然後設置你想換行與

br:after {content: ', ';)

被替換，如果你需要換行再次正常工作的字符串把

br {content:none;}

實際上工作很好，但它是否正確的方式來做到這一點？你將如何用css中的字符替換換行符？我正在尋找一種解決方案，在該解決方案中，cms的最終用戶在輸入學分時不必添加太多的html代碼。

來源

2013-07-01 peek

這不應該作爲內容應用y與'：before'和'：after'僞類一起工作 –

您好，歡迎來到SO。我在這裏沒有看到任何問題，所以我想你想回答你自己的問題？這是完全可以接受的，但是你必須假裝問一個問題（人會怎麼樣？），然後在下面回答。 – FelipeAls

@IanClark第一http://stackoverflow.com/a/11175158/137626它至少有一些效果（Chrome？）上的替代元素（輸入？img？），觸發一個「噢，現在我的內容和我'會有不同的表現......「對不起，太模糊了） – FelipeAls

自閉標籤（如<br>,<img>,<input>等）不能生成內容。這些是被替換的元素。

有關替換元素的更多信息，請參閱這篇文章：http://www.red-team-design.com/css-generated-content-replaced-elements

來源

2013-07-01 18:25:13 kalley

良好的鏈接，我認爲它證實了這種行爲應該被視爲更多的錯誤，而不是解決這個問題。 –

/* 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，鉻40.0.2214.95，歌劇12.16，Safari瀏覽器7.0.4

在Firefox 35.0.1和Internet Explorer 11中不起作用

來源

2015-02-05 11:34:22 jenkek

用字符/字符串替換<br>使用css？

回答

相關問題