Home  >  Article  >  Web Front-end  >  How to Implement Ellipsis in Truncated Text with Resizable Elements?

How to Implement Ellipsis in Truncated Text with Resizable Elements?

Barbara Streisand
Barbara StreisandOriginal
2024-10-30 06:57:28190browse

How to Implement Ellipsis in Truncated Text with Resizable Elements?

Ellipsis Insertion within Truncated Text

To implement ellipses in the middle of a text within a resizable element, consider the following approach:

Step 1: Data Attribute Declaration

In HTML, include the full text within a custom data-* attribute, such as:

Step 2: Event Listeners

Assign event listeners for load and resize to a JavaScript function.

Step 3: Ellipsis Function

Utilize the following JavaScript function to handle ellipsis insertion:

<code class="javascript">function start_and_end(str) {
  if (str.length > 35) {
    return str.substr(0, 20) + '...' + str.substr(str.length - 10, str.length);
  }
  return str;
}</code>

Adjust the values (e.g., 20 and 10) for different truncations.

Step 4: InnerHTML Insertion

Within the event listener function, read the original data attribute and place it in the innerHTML of the span tag:

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>

Step 5: Tooltip (Optional)

To provide a tooltip for users with the full string, add an abbr tag with the title attribute:

...

The above is the detailed content of How to Implement Ellipsis in Truncated Text with Resizable Elements?. For more information, please follow other related articles on the PHP Chinese website!

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