当文本被截断时更改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>

你的意思是内容是> 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>

谢谢，请尝试此解决方案并进行更新。 –

当文本被截断时更改div中的文本颜色

相关推荐