Ellipsis is not showing up even if text overflows

July 20, 2023

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <p className="text">
        This is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!
      </p>
    </div>
  );
}

style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.text {
  padding: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  margin: 50px;
  background: yellow;
  height: 150px;
}

Also, please refer this sandbox link -> https://codesandbox.io/s/overflow-ellipsis-cx6d44

Currently, when the text overflows, it doesn’t shows ellipsis in the end. See the below image.

I want to have ellipsis at the end similar to this image.

>Solution :

You have to add styles display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; to your existing code and remove styles from your existing code
padding: 20px;height: 150px; no need of this style.

.text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
margin: 50px;
background: yellow;
line-height: 20px;
}

  <p class="text">
        This is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!This is a test!This
        is a test!This is a test!This is a test!This is a test!This is a
        test!This is a test!This is a test!This is a test!This is a test!This is
        a test!This is a test!This is a test!This is a test!
    </p>