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!