Adjusting the color of text inside a div when it gets cut off

I've been attempting to change the text color when it gets truncated, but so far I haven't had any luck.

In the scenario presented below, the first div (numbered 1) should display in a different color.

Any suggestions or recommendations would be greatly 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>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is a potential solution using jQuery, with some CSS modifications 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

learn the process of sending information to a modal in order to create a dynamic modal with Bootstrap 4.6

Recently, I made the switch to adminLTE3 (using bootstrap 4.6) as my front-end framework for Tornado. However, I came across an issue with modals. In the previous version of adminLTE (using bootstrap 3.3), I was able to dynamically generate content for mod ...

bootstrap-4twitter-bootstrap-3modal-dialogtornado

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

When the columns start stacking in Bootstrap, the padding is disabled

As I work on revamping my website, I have decided to incorporate the Bootstrap framework. While I can navigate through HTML coding, I still consider myself a novice when it comes to coding. The current issue I am facing involves the alignment of two colum ...

htmlcsstwitter-bootstrappadding

I am looking to swap out one div for another using jQuery

<div id="main"> <div id="abc"> <div> This div needs to be swapped out </div> </div> <div id="xyz" style="display:none"> <div> This is the replacing div ...

jqueryhtml

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

How can you conceal nested elements within a layout that adjusts to various screen sizes or is percentage-based

Contemplate this HTML: <body> <div id="parent"> <div id="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus ege ...

htmlcssoverflow

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

javascripthtmlcssangular

Toggle between list elements using the inner text of the elements with jQuery

My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...

javascriptjqueryhtmlcsslist

How can I use React to selectively print a section of a webpage?

I need to print only the Bill section of my page when a button is clicked. How can I achieve this without printing the entire page? I tried using window.print() within a function, but it ended up printing the entire page instead. ...

htmlreactjsprinting

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

javascripthtmlthree.js

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

http://jsfiddle.net/PeKdr/ Encountering an issue when having a JavaScript variable that contains both HTML and JavaScript, resulting in unexpected behavior in the output window. Neither of the buttons - one triggering the function appendTheString() or the ...

javascriptjqueryhtmlappend

The functionality of submitting a form using a jQuery event is not functioning properly

I'm trying to add a second submit button to a form using jQuery to change the name attribute before submitting the button. Here's an example of what I'm trying to achieve: <form method="post" id="myForm> ... <button c ...

htmljquery

putting a division element above a image carousel

Is there a way to overlay a div tag on top of a slideshow, similar to the one shown in this link? In the example provided, a div with the title "DISCOVER THE JOY OF COOKING" is positioned over a slideshow. Any tips on how I can achieve this effect? ...

htmlcss

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

Customize the height of individual carousel items in Primeng carousel

Hey there, I'm currently using the primeng carousel component and running into an issue where the carousel height is always based on the tallest item. I am looking to have an automatic height for each individual carousel item instead. Do you think th ...

htmlangularprimeng

Override the foundation SASS property for an element identified by its unique ID

Is it possible to override properties for a specific element with an ID using Foundation and Sass? I need to customize the style of a <section id='myid'> element by overriding certain properties: #myid { background: blue; color: whi ...

csssasszurb-foundation

What prevents Popper from functioning on its own when I incorporate bootstrap.bundle.js?

Upon my understanding, Bootstrap 4 relies on Popper for its functionalities. When utilizing bootstrap.bundle.js, Bootstrap can smoothly access Popper for various operations. Nevertheless, when attempting to use Popper independently, an error message is enc ...

javascriptbootstrap-4popper.js

Modifying the Nav-Bar background color causes the hamburger icon to become invisible

Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-md-dark navbar-lg-light" style="background-color: #11100b;" id="nav-mob"> <div class="container"> <a ...

cssnavbarbootstrap-5hamburger-menuion-navbar

Attempting to limit entry to a pathway when the loggedIn criterion is satisfied

I am currently facing a challenge with restricting access to the login page if the user is already logged in. I have been attempting to achieve this by checking for an existing token in the localStorage. Do you have any suggestions on how I can troublesh ...

phphtmllaravelvue.jsvuejs2