How to Implement Ellipsis in Text for a Resizable Element?

Ellipsis in Text: Achieving the Mac Style

Challenge:

Implement ellipsis ( "...") in the middle of text within a resizable element. The ellipsis should disappear when the element width matches the full text width.

Solution:

1. Add Data Attribute to HTML:

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

   <span data-original="your string here"></span>

   Copy after login

2. JavaScript Event Listeners:

   Add event listeners to the load and resize events of the element. These listeners should trigger a JavaScript function that will:

   • Retrieve the original text from the data-* attribute
   • Place the text in the innerHTML of the span element

3. Ellipsis Function:

   Create an ellipsis function that trims the text if it exceeds a certain length. For example:

   <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>

   Copy after login

   Customize the text length and position values as needed.

4. Tooltip for Full Text:

   For added accessibility, consider adding an abbr-tag on the ellipsis with a tooltip that displays the full text:

   <code class="html"><abbr title="full string">...</abbr></code>

   Copy after login

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