Limit text automatically according to div width using JQuery or CSS

Question

Limit text automatically according to <div> width using JQuery or CSS

Input : This is my text and I want to limit.

.limit-text{
  width:300px;
}

<div class="limit-text">
   <span>This is my text and I want to limit.</span>
</div>

Output : This is my text and I wa....

Hello! :) You can refer to this. https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow — Debsmita Paul, Oct 12 '20 at 13:11

score 0 · Answer 1 · answered Oct 12 '20 at 13:23

You can do it with pure CSS.

.limit-text{
  width:300px;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

<div class="limit-text">
This is my text and I want to limit
</div>

For More Detailed Explanation Read This Tweet By @denicmarko on Twitter

Limit text automatically according to div width using JQuery or CSS

1 Answers1