Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Below is a snippet of my code:

<div className="LoanReviewCard">
  <p className="subHeader-text">BASICS</p>
  <p className="header-text">
    {currentLoanRequest.loanProposalDetails.purpose}
  </p>
  ...
  <p className="review-text">
    <span className="bold">Optional Clause:</span>{" "}
    {currentLoanRequest.loanProposalDetails.addLoanClause.length > 0 ? (
      currentLoanRequest.loanProposalDetails.addLoanClause
    ) : "None"}
  </p>
</div>

This is the relevant part of my CSS file:

.review-text {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    .bold {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
    }
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    word-break: break-word;
}

The issue I'm facing is that the words are too long and I want to limit it to just the first 50 characters.

https://i.sstatic.net/QbQdY.png

Answer №1

var text = $('.txt').text();
var first50Char = text.substr(0,50) 
$('.txt').html(first50Char+'...'+'<a class="readmore" href="#">readmore</a>');
$('.txt').attr('data-text',text);

$('.readmore').click(function(e)
{
    e.preventDefault();
    $(this).parent().html($(this).parent().attr('data-text'))

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='txt'>
How To Display 1st 50 characters Of Text by using , html, css, javascript, jquery . and after 50 charecters create link for show the total text
</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

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

Different ways to modify the CSS file of the bx-slider plugin for multiple sliders within a single webpage

Currently in the process of building a website using bx slider. I am looking to incorporate three sliders onto a single page for sliding HTML content. Initially, I added a bx slider to the page and customized it using CSS. I made modifications within jqu ...

Container beyond div

Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided? Appreciate any assistance. Live ...

Issue with Ajax request failing to successfully send and retrieve raw HTML data

Utilizing an Ajax call to trigger a C# method that is responsible for processing user paste input by eliminating unwanted html tags and attributes. Encountering an issue where my Ajax call fails when I paste in content with html formatting (containing tag ...

Ensure that the element remains on a single line, even if it needs to be positioned below

I am dealing with a row of horizontal divs that I want to keep together, but a floating element on the right side is causing them to break into two lines when it overlaps. My goal is to have the line of divs move below the float, similar to how the word "H ...

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

AngularJS: Modifying values in one div updates data in all other divs

The webpage appears as shown below: https://i.sstatic.net/IxcnK.png HTML <li class="list-group-item" ng-repeat="eachData in lstRepositoryData"> <div class="ember-view"> <div class="github-connection overflow-hidden shadow-oute ...

The AngularJS $HTTP loop counter fails to update

When working with an HTTP service and binding JSON data to HTML, I implemented the following code: This function uses a 2-second timer to automatically fetch data whenever there is a change in the backend. function sampleDevices ...

Cleaning up extra spacing following the implementation of the "top" tag in CSS

I've been working on a project for this site and I've encountered a small issue. Despite my efforts, I can't seem to resolve it :/ There's an unwanted whitespace at the bottom of my webpage, in the footer section. I've attempted ...

The image hover feature is not functioning as expected in Angular 4

Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

A challenge I am facing involves creating a form with multiple select options that need to be ranked by the user from 1-8. However, I am encountering some difficulties in hiding, removing, or disabling certain select options. Below is an excerpt from my f ...

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, i ...

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

Tips for setting up the Top Menu and Left Side Menu in your system

You're looking to incorporate both the Top Menu and Left Side Menu. The top menu should remain fixed at the top of the page. Implementing the Left Side Menu below the Top Menu has been a challenge. It's currently covering the top menu, which is ...

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

Using AJAX does not automatically trigger the form submission process

It seems like the preventDefault function is working as intended to prevent the form from posting. However, the update() function is not sending the form data to the specified URL. I am perplexed by this issue and unsure of why it is happening. UPDATE: I ...

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

Trouble with the Ngx-Captcha feature

I am currently utilizing https://www.npmjs.com/package/ngx-captcha/v/11.0.0. <ngx-recaptcha2 #captchaElem [siteKey]="'6Leh1ZIjAAAAAG8g0BuncTRT-VMjh3Y7HblZ9XSZ'" (success)="handleSuccess($event)" [useGlobalDomain]="fals ...