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

【问题标题】：Changing text color in div when text is truncated文本被截断时更改 div 中的文本颜色
【发布时间】：2018-03-23 13:22:15
【问题描述】：

每当文本被截断时，我都会尝试更改文本颜色。但是，还没有成功。

在下面的示例中，第一个 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。
简短回答 - 你需要 JavaScript。这看起来类似于处理 CSS 中的溢出的stackoverflow.com/questions/18844192/…。那里有一些 JS 技术的链接。
stackoverflow.com/questions/13213197/…
@MikeGorski，当然。感谢您提供的链接将通过它们。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

也许是这样的 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>

【讨论】：