使用css在文本後添加'。'（句點）

我已經創建了一個ASP頁面來顯示事件。我已經使用css在一個項目模板中顯示最多3行內容。使用css在文本後添加'。'（句點）

我想要的文字，即後顯示3個時期：

enter image description here

我搜索在互聯網上找到解決方案使用.after{content:"..."}文本後添加時期，但點都放在新線，但我想要獲取圖像中的確切輸出。

我的CSS是：用content財產

您可以控制點的間距，或分別使用font-size和letter-spacing房產大小沿

 .eventDescription 
     { 
     height: 45px; 
     margin-left: 65px; 
     font-size: 15px;    
     line-height: 1.5em; 
     overflow: hidden; 
     text-align: justify; 
     line-height: 15px; 
     padding-top: 10px; 
     width: 220px;    
     }

來源

2013-10-01 Mohemmad K

有更多的信息*爲省略號一些*原生瀏覽器支持（不是真的一樣的三個階段）：http://mattsnider.com/css-string-truncation -with-ellipsis/ –

@TiesonT。一些開發人員不使用省略號，因爲他們已經限制了服務器端的內容，但是爲了表明內容還有更多需要閱讀的內容，他們更喜歡這種方法:) –

您應該指定相關的HTML並解釋您是否期望截斷帶有CSS的文本（設置爲「overflow：hidden」表明你可能）。你也應該描述你的嘗試。代碼'.after {content：「...」}'不會這樣做 - 問題中提到的'沒有'類。 –

使用:after僞。

Demo 2

來到你的語法，你正在使用.after{content:"..."}所以首先你需要在這裏分配類的元素，所以這將是<p class="after">，你也需要:after僞添加到您的.after類

.after:after { 
    content: "..."; 
}

注意：使用:after，內容將是inline默認情況下，在訂購應用邊距或填充需要使用inline-block;，同樣，老版本的IE不會尊重這個屬性。

有關瀏覽器支持:after

來源

2013-10-01 04:55:51

謝謝先生，我修改了我的css，像[this]（http://pastebin.com/b9sjxU56），但是我得到的輸出像[this]（http://i.imgur.com/lQXOMy4.png）。 –

@RiyazKalva你能提供你的HTML嗎？ –

@RiyazKalva你能提供一個小提琴嗎？可能是'margin'/'padding'或'display：block'問題。 –

使用css在文本後添加'。'（句點）

回答

相關問題