CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
JGV
JGV

Reputation: 5187

Changing text color in div when text is truncated

I am trying to change the text color whenever the text is truncated. But, no success yet.

In the example below, the first div (with bullet point 1) should have a different color.

Any suggestion / recommendation is appreciated.

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

Upvotes: 4

Views: 338

Answers (1)

Temani Afif
Temani Afif

Reputation: 273807

Maybe a jQuery solution like this, i updated the CSS a bit in order to be able to test the width :

$('.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>

Upvotes: 2

Related Questions