Using the HTML attribute text-overflow: hidden with a dot at the end may not produce the desired results

Currently, I am utilizing a bootstrap card and attempting to enhance the appearance of the lengthy text within the dscrptn_limit class by adding ellipsis at the end.

This is my template:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="card m-4" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">My title</h5>
    <small class="card-text">topic</small>
    <br>
    <small class="card-text dscrptn_limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare sodales ipsum porta rhoncus. Aliquam aliquam...
    </small>
  </div>
</div>

<style>
  .dscrptn_limit{
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    height: 180px;
    text-overflow: ellipsis;
  }
</style>

Regrettably, it seems not to be functioning as intended. Is there a solution for this issue?

htmlcssbootstrap-4

Answer №1

Make sure to remove the height or auto setting and adjust the text line limit accordingly.
Refer to the example below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="card m-4" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">My title</h5>
    <small class="card-text">topic</small>
    <br>
    <small class="card-text dscrptn_limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare sodales ipsum porta rhoncus...
    </small>
  </div>
</div>

<style>
  .dscrptn_limit{
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    height: auto;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    -webkit-box-orient: vertical;
  }
</style>

Answer №2

To enable the ellipsis effect, ensure that you include white-space: nowrap; in your CSS. Additionally, the element should have a style of display: block;.

.dscrptn_limit {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
  height: 180px;
  text-overflow: ellipsis;
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="card m-4" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">My title</h5>
    <small class="card-text">topic</small>
    <br>
    <small class="card-text dscrptn_limit">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare sodales ipsum porta rhoncus. Aliquam aliquam metus a volutpat porta. In vitae lacus mi. Mauris non lacus non ligula lobortis malesuada. Suspendisse quis nibh consectetur erat accumsan porttitor. Mauris mollis, nibh ut porta tincidunt, ipsum risus sagittis elit, sed venenatis felis neque aliquet lectus. Sed tempus, orci et placerat lacinia, tellus massa semper diam, rutrum accumsan leo velit at nunc. Praesent et dignissim orci, eget dapibus urna. Mauris rhoncus tortor in risus egestas, a mattis metus sollicitudin. Suspendisse in urna non dui placerat vehicula ac et ante. Nulla ipsum mauris, varius sit amet leo non, vulputate lacinia libero. Etiam sit amet lobortis leo. Pellentesque egestas purus a ipsum consequat, at aliquam est sodales. Sed placerat, mi in rhoncus aliquet, mi ipsum rhoncus odio, sed interdum massa tellus quis mauris
    </small>
  </div>
</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

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Looking to scan Barcode and Qrcode on Android, iPhone, and iPad devices for a project that is built on AngularJS and HTML5 as a mobile website. The requirement is not to download any third-party native application on the device, ruling out the use of nati ...

javascriptjqueryhtmlangularjs

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML

My project includes a feature where emails sent to a specific address are parsed, with attachments saved to the network and metadata stored in a database. If the serial number of a finished good matches the one included in the email, a note is generated an ...

javascripthtmlajaxasp.net-mvc-4

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

What is the best way to activate a submit button when at least one checkbox is selected?

I checked out Mark's solution on Stack Overflow regarding disabling a button if no checkboxes are selected in Angular2. However, I have more than one array to consider. How can I adjust the code provided in the link for my situation? Alternatively, d ...

htmlangular

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

javascriptcssreactjstailwind-css

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

javascripthtmlcsssass

Activate CSS modules in ReactJS by incorporating a .module extension to the CSS file

Being new to ReactJS, I recently learned about enabling CSS modules and discovered the following: If you append .module to a class name, it will generate a base64 hash string for that class As an example, I created a function-based component called Lay ...

htmlcssreactjs

Can someone please show me how to position this H1 in the center at the bottom of the div?

Looking for a simple solution to place text at the bottom of a div without turning the entire div into a grid. New to HTML/CSS and struggling with vertical alignment issues... <!DOCTYPE html> <html> <head> <title>Creating an O ...

htmlcsstextpositioning

How to align a list item to the right using CSS

I'm having trouble aligning items in a list to the right and adjusting their width based on content length. Unfortunately, I haven't been able to make it work despite multiple attempts. Take a look at my code snippet below: .messages { over ...

htmlcss

Positioning two images side by side by applying the parent element's class

I am interested in creating an image of 1 star arranged into 6 stars by simply targeting the parent element's class. .stars { /* which HTML tag should be used? */ } <div class="stars"> <img src="image/stars.jpeg"> <img src="ima ...

htmlcssimage

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js: module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ uglify: { start: { files: { 'js/script.min.js': ['js/script.js&a ...

htmlcssnode.jsnpmgruntjs

Selenium: Utilizing the get_attribute() function with a CSS query

I am attempting to retrieve the value of the title attribute. There are multiple links on the page and I need to specifically select the first link and extract its title attribute. Here is the selenium command that I have used: self.se.get_attribute("c ...

cssseleniumselenium-rc

Does Three.js have a concept similar to an origin point?

I am curious to know if there is a concept similar to an origin point in three.js like we have in Blender. I have been researching this topic without any luck. I am working on creating a pinball game and it is crucial that the origin point of the paddle ...

javascripthtmlthree.js3dcannon.js

Is the original image source revealed when clicked?

I've implemented an expand and collapse feature using jQuery/JavaScript. Clicking on the DIV causes the image inside to change state. However, clicking on the same DIV again doesn't return the image to its original state; it remains stuck in the ...

javascriptjqueryhtmlaccordion

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Need help with a JSF Primefaces project using the omega theme. The selectOneMenu dropdowns are not displaying correctly (missing line). Current look: https://i.stack.imgur.com/vF4ms.png Expected look: https://i.stack.imgur.com/hXsIB.png Any suggestion ...

cssjsfprimefacesselectonemenu

The fusion of PHP and HTML coding

I have been attempting to integrate some PHP code into a combination of HTML and I am facing some challenges. Below is the code I am working with: <?php $result = mysqli_query($db,"SELECT * FROM classes"); while($record = mysqli_fetch_array($result)) ...

phphtml

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Leveraging moment.format Function in Angular within an HTML Context

Is there a way to implement the moment.format method in HTML? Currently, I am utilizing the toLocaleDateString method to showcase an array of dates: <ng-template let-event> <div>{{event.date.toLocaleDateString(' ...

htmlangulartypescriptdatemomentjs

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

cssdjangodjango-admindjango-3.1