Home > Article > Web Front-end > Here are a few title options, keeping the question format and reflecting the article\'s content: Short & Concise: * How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div? * Text Ove

Here are a few title options, keeping the question format and reflecting the article\'s content: Short & Concise: * How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div? * Text Ove

Barbara StreisandOriginal: 2024-10-27 00:39:03992browse

Here are a few title options, keeping the question format and reflecting the article's content:

Short & Concise:

* How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div?
* Text Overflowing? Ellipsis Solution for Fixed Width and Height Divs

Ellipse Text Overflow for Fixed Width and Height

Issue:

Creating an ellipsis for multi-line text within a

element with fixed width and height can be challenging. Despite exploring jQuery plugins, a suitable solution has been elusive.

Solution:

Utilizing jQuery, you can achieve the desired effect by iteratively removing the last word from the text until it fits within the specified height. Here's the code snippet:

<code class="js">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}</code>

This script repeatedly replaces the last word of the text with an ellipsis (...) until the text fits within the

. Even with JavaScript disabled, the text will be displayed correctly but without the ellipsis.

To optimize performance, consider combining this client-side truncation with server-side truncation to reduce overhead.

For a working example, check out this jsFiddle Demo.

The above is the detailed content of Here are a few title options, keeping the question format and reflecting the article\'s content: Short & Concise: * How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div? * Text Ove. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery for format this overflow word

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Dynamically Update an Tag\'s href Attribute Using JavaScript?Next article：How to Dynamically Update an Tag\'s href Attribute Using JavaScript?

See more

Here are a few title options, keeping the question format and reflecting the article\'s content: Short & Concise: * How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div? * Text Ove

Ellipse Text Overflow for Fixed Width and Height

Issue:

Solution:

Related articles