How to add text ellipsis for multiline by CSS

Ellipsis (…) for single-line text is easy these days. CSS makes that somewhat easy with the text-overflow property.

Ellipsis on single-line text

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

But, If you want to use ellipsis on multiline text then don’t expect to have any fun. CSS has no standard method for doing this.

However, there are various tricky workarounds have been created recently. One of the methods is here:

Ellipsis on multiline text

.text-ellipsis-multi-line{
  text-overflow: ellipsis;
  overflow: hidden;
  // Addition lines for 3 line or multiline ellipsis
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

How to add or remove class to another element by ReactJS onClick?

import React from "react";
import "./styles.css";

export default function App() {
    const [show, setShow] = React.useState();
    return (
        <div className="App">
            <button className="add" onClick={() => setShow(true)}>
                Show
            </button>
            <button className="remove" onClick={() => setShow(false)}>
                Hide
            </button>
            <button className="toggle" onClick={() => setShow(!show)}>
                Toggle
            </button>
            <nav className={`nav ${show ? "show" : ""}`}>Navigation menu</nav>
        </div>
    );
}

“Thank you for taking the time to read the article. If you’re interested, you can learn more about me 🙂 I appreciate your attention and look forward to sharing more about myself with you. May your day be bug-free and your code compile on the first try!”

How to debug HTML elements by CSS

How to debug HTML elements by CSS? There is an easy trick to debug all the HTML elements throughout the application. Sometimes it really hard to find out that how much a element having space specially height and width and other properties as well. Though, there are many tools and add-ons to check but for me this following solution is the best while I debug my solution by CSS. I hope it will help to you too!

 * {
        outline: 1px solid red;
   }