Changing text color in div when text is truncated

Question

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>

You mean the content is > 200px, you want to change the color? — Vimalraj Selvam, Oct 11 '17 at 18:55
Short answer - you need JavaScript. This looks similar to https://stackoverflow.com/questions/18844192/css-only-detection-of-text-overflows-in-html which deal with overflow in CSS. There are some links to JS techniques there. — Mike Gorski, Oct 11 '17 at 18:58
https://stackoverflow.com/questions/13213197/is-there-a-css-pseudo-selector-for-overflow — roberrrt-s, Oct 11 '17 at 19:25
@MikeGorski, sure. Thanks for the links will go through them. — JGV, Oct 11 '17 at 19:43

score 2 · Answer 1 · answered Oct 11 '17 at 19:08

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>

Changing text color in div when text is truncated

1 Answers1