Question

我试图在文本被截断时更改文本颜色。但是，还没有成功。

在下面的示例中，第一个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>

Answer 1

也许像这样的jQuery解决方案，我更新了CSS，以便能够测试宽度：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: