當文本被截斷時更改div中的文本顏色

我試圖在文本被截斷時更改文本顏色。但是，還沒有成功。當文本被截斷時更改div中的文本顏色

在下面的示例中，第一個div（帶有項目符號1）應具有不同的顏色。

任何意見/建議表示讚賞。

.user-comment{ 
 
    width:200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="user-comment text-truncate">1. This is a test comment. Please do not use in production.</div> 
 
<div class="user-comment text-truncate">2. This is not a QA.</div> 
 
<div class="user-comment text-truncate">3. No comment found.</div> 
 
<div class="user-comment text-truncate">4. Please ignote.</div>

來源

2017-10-11 Vimalan Jaya Ganesh

你的意思是內容是> 200px，你想改變顏色？ –

我想你會需要JavaScript來做到這一點。 – sol

簡短的回答 - 你需要JavaScript。這看起來類似於處理CSS溢出的https://stackoverflow.com/questions/18844192/css-only-detection-of-text-overflows-in-html。這裏有一些JS技術的鏈接。 –

也許一個jQuery解決這個樣子，我更新了CSS爲了一點是能夠測試寬度：

$('.user-comment').each(function(e){ 
 
    
 
if($(this).innerWidth()==200) { 
 
    $(this).addClass('color'); 
 
} 
 

 
});

.user-comment{ 
 
    max-width:200px; 
 
    display:inline-block; 
 
    margin-right:100%; 
 
} 
 
.color { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="user-comment text-truncate">1. This is a test comment. Please do not use in production.</div> 
 
<div class="user-comment text-truncate">2. This is not a QA.</div> 
 
<div class="user-comment text-truncate">3. No comment found.</div> 
 
<div class="user-comment text-truncate">4. Please ignote.</div>

來源

2017-10-11 19:08:53

謝謝，請嘗試此解決方案並進行更新。 –

當文本被截斷時更改div中的文本顏色

回答

相關問題