Question 211816 in CSS Question posted in
Some basic documentation can be found here.

Css – Ellipsis is not showing up even if text overflows

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.

problem

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

expected behavior

Tags:

2

Answers


  1. 0

    Adding white-space:nowrap to your existing code should fix it for you.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search