Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google.

I wanted to neatly display my text within one of my cards, but so far I've only achieved this:

https://i.stack.imgur.com/JcW2Y.png

My current CSS code is as follows:

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

This is what I aim to achieve:

  • Text wraps to a new line when there's a line break in the text: check
  • Text displays 3 points ellipsis when there's vertical overflow: check
  • Text shifts to next line when there's horizontal overflow: not quite right (refer to line 2 in the image)

Any suggestions on how to make this happen?

javascriptcssreactjstextmaterial-ui

Answer №1

After some experimentation, I managed to navigate through the use of webkit-line-clamp, referencing a helpful online resource on text truncation techniques in CSS found here.

Below is the final CSS code snippet:

overflow: hidden;
white-space: pre-line;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

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

Analyzing objects within an array for similarities

Suppose I have an array containing objects: var arr = [ { id: 1, pt: 0 }, { id: 2, pt: 12 }, { id: 3, pt: 7 }, { id: 4, pt: 45 }, { id: 5, pt: 123 }, ]; I am looking to loop through this array (possibly using array.forEach or array.map) ...

javascriptarraysobjectcompare

Mastering the art of constantly monitoring data changes in a Firebase real-time database using Vue.js

I am currently utilizing vue.js version 2 in CDN mode. I have designed 2 vue components - one that pushes data to a database and another that displays it. Here is the code snippet: firebase.database().ref().on('value', function (data) { c ...

javascriptfirebasefirebase-realtime-databasevuejs2vue-component

Flatten information from an object containing multiple objects within an array

In my current project using Vue, I am making an API call to retrieve data from my Laravel backend (nova). The returned data is structured in the following way. The data consists of an array, which contains arrays of objects. Each array represents a record ...

javascriptarraysobjectvue.jsecmascript-6

"Why does Termux encounter permission issues when trying to create a .gitignore file in a create-react-app

I ran into an issue while trying to set up react using create-react-app. The error message I received is as follows: /data/data/com.termux/files/home/mya2/node_modules/react-scripts/scripts/init.js:153 throw err; ^ Error: EACCES: permission ...

reactjscreate-react-apptermux

Tips on converting Nextjs generated Prisma types case from snake_case to camelCase

I have a full-stack application built with Next.js and Prisma ORM "next": "12.3.0" "prisma": "^4.5.0" Essentially, I am looking to convert the case of my types from snake_case to camelCase to align with the front-en ...

reactjstypescriptnext.jsprisma

How can I pass props from a page to components in Next.js using getServerSideProps?

Struggling to fetch the coingecko-api for accessing live bitcoin prices. Trying to pass return props of getServerSideProps to my <CalculatorBuy /> component within the <Main /> component. Facing issues when importing async function in calcula ...

javascriptreactjsnext.jscryptocurrencycoingecko

Implementing a toggle function in Vue.js to add or remove a class from the body element when a

I'd like to add a toggleable class to either the body element or the root element("#app") when the button inside the header component is clicked. Header.vue : <template lang="html"> <header> <button class="navbar-toggler navbar-tog ...

javascriptvue.jsvuejs2vue-component

What could be causing mobile phones to overlook my CSS media query?

My CSS includes 3 media queries that function properly when I resize the browser, but fail to work when using the responsive design tool in the inspector ("toggle device mode") and on mobile devices. Snippet of my CSS code : @media screen and (max-width: ...

htmlcssresponsive-designmedia-queries

The array is present both before and after the res.json() call, however it appears empty in the response

When using Express to send a json response with res.json(), I am experiencing an issue where the value of records in the object sent via res.json() is empty. My code snippet looks like this: stats.activities(params).then(res => { processActivities ...

javascriptnode.jsexpress

Clear out a collection in backbone.js

I am looking to clear out a collection by removing each item in sequence. this.nodes.each(function(node){ this.nodes.remove(node); }, this); The current method is ineffective as the collection length changes with each removal. Utilizing a temporary arr ...

javascriptcollectionsbackbone.js

Establishing the data type for the state coming from the API

Whenever I try to add a new API response to the status, it shows as undefined. I need to filter out the incoming data from randomcocktail and then put it to use. Random.tsx import { useState, useEffect } from "react"; import { CocktailType } ...

reactjstypescriptapi

Join the geomarkers in two datasets using connecting lines

I am currently developing a leaflet.js map incorporating two distinct sets of JSON data layers stored as js-files. The first dataset comprises the geographical locations of various newsrooms along with their respective IDs, while the second dataset contai ...

javascriptleaflet

Creating an image selection feature using ejs and express: a step-by-step guide

As I develop a blog site with a unique post management system using node, express, moongoDB, and EJS, everything seems to be running smoothly. However, the challenge arises when attempting to integrate Cloudinary uploaded images from my mongoDB to allow fo ...

javascriptnode.jsmongodbexpressejs

Writing xpath or cssSelector for a material-ui element can be challenging, especially when the element disappears. Here are some tips to

Here is an example of an element (textbox) with various attributes: <input aria-invalid="false" autocomplete="off" id="multiple-limit-tags" required="" type="text" class="MuiInputBase-input MuiOutli ...

selenium-webdriverxpathmaterial-uidropdownwebdriver-io

Unattaching Events in AngularJS

I'm still navigating my way through the realms of Angular and MVC programming, uncertain if I'm on the right track. There's a jQuery snippet that I wish to implement in some of my partials, but not all. With event listeners that persist eve ...

javascriptjqueryangularjsevents

Differences between applying addClass(undefined) and addClass(null)

At times, it crosses my mind to include a class in a chain, depending on certain conditions. What would be the most fitting semantic value to add no class? For instance: $(".element").performAction().addClass(condition ? "special-class" : undefined).perf ...

javascriptjquerynullundefinedchain

Checking validation with parsley.js without triggering form submission

I have been working with the latest release of Parsley for data validation. While it is validating my data correctly, I am encountering an issue where the form does not submit after validation is complete. I have spent hours trying to troubleshoot this pro ...

javascriptjqueryvalidationparsley.js

Browsing data privacy is crucial, which is why I have decided to operate both servers on the same port to ensure that cookies are

In my project, the front end is built with Next.js and the backend uses Express and Node.js. These projects are currently running on different ports - the frontend on port 3000 and the backend on port 8080. While everything works fine locally and cookies a ...

node.jsreactjsazureexpressnext.js

Transferring search outcome from the backend to the front end periodically

This is my first time working with sockets and I've set up a basic back end and front end to test at my workplace. In this example, I want the back end to query our server every 10 seconds and send the results to the front end. Currently, I have the ...

node.jsreactjssocket.io

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

cssgoogle-chromeviewport-unitscss-calc