Vuetify Card Overflow: Handling Multiline Text with Ellipsis

I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feature once the content exceeds this limit.

https://i.sstatic.net/7gpXM.png

Vuetify code

<v-card rounded dark class="rounded-xl" max-height="225">
    <v-card-text class="elip">{{info.description}}</v-card-text>
</v-card>

Approach taken

.elip{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

I introduced a CSS class called "elip", resulting in a single line card with an ellipsis effect at the end. https://i.sstatic.net/p3ght.png

Answer №1

If you want to limit the number of lines within a block container, consider using the -webkit-line-clamp property.

For more information, you can visit MDN
or check out this CodePen example where lorem ipsum text is restricted to 3 lines.

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

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

What's the key ingredient I need to add for a dropdown navigation menu?

What am I overlooking in my HTML and CSS coding to create a standard list dropdown in my navigation menu? When I preview this section of the page in Chrome and IE, the navigation area appears fine until I hover over the Fishing and Guides link. Instead of ...

What is the reason for the initial display of an empty option when using AngularJS to select an

Every time I refresh the page, the initial option is blank. How can I set Any Make as the default selection? Below is the code snippet from my view: <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-chan ...

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

How can AngularJS effectively parse JSON data containing HTML elements?

We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...

"Enhance the appearance of bootstrap buttons by applying CSS to add shadow and border when the

Working on a frontend project using the React framework and Bootstrap 5.3 for design. Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation. Link ...

What is the best way to utilize d3.domain for extracting both d3.min and d3.max values from various columns within a JSON dataset?

I have a JSON file that contains data from different years for "male," "female," and "both" categories. I want to set the minimum value in my domain to be the lowest value across all three columns and do the same for the maximum value. Is there a way for ...

Adding conditional href based on a specific criteria to an <a> tag in AngularJs

I have been working on a menu list where some menus contain URLs and others do not. When a menu item includes a URL, the href attribute is displayed, otherwise just the span tag is shown. I tried checking it like this but ended up with href="#" when the me ...

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

Pure CSS tab system that prevents label propagation using anchors

I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...

Mall magnitude miscalculation

I am currently experiencing an issue with Galleria and the Flickr plugin. Some images are displaying correctly, while others appear scaled and parts of them are cut off. How can I fix this problem? Below is the HTML code for the Galleria gallery on my web ...

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

Unable to correctly declare and display UTF-8 character within JSON syntax

In my JSON object, there is an attribute that contains a unique special character - I've attempted to save the string in encoded UTF-8 as "\xF0\x9F\x94\x94" or tried displaying it using its HEX value - String.fromCharCode(0x1F514 ...

show an HTML webpage within a <div> container using AJAX technology

I am trying to include an HTML page named Introduction.html (located in the same folder as x.html) within div1. However, it does not seem to be loading properly. Below is a snippet of the code from x.html x.html <!DOCTYPE html> <h ...

Retrieve the file name of the webpage from the URL bar

Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

Updating the Laravel array using Vue components can be done by accessing the array

I'm currently working with a Vue template and attempting to retrieve the pets array. https://i.sstatic.net/pgxWJ.png This is the snippet of code that I am using: foreach ($request->pets as $pet) { $pet = $client->pets()->find($pet)-> ...

Getting started with CSS and HTML: Tips and Tricks for Beginners

Seeking advice on how to enhance my web designing skills, particularly in starting point and techniques. Currently, I am familiar with HTML and CSS, but have been primarily using pre-made templates for building websites. I aspire to be able to transform ...