如何在可调整大小的元素的文本中实现省略号？

文本中的省略号：实现 Mac 风格

挑战：

实现省略号 ( " ...") 位于可调整大小的元素内的文本中间。当元素宽度与全文宽度匹配时，省略号应该消失。

解决方案：

1. 向 HTML 添加数据属性：

   在 HTML 中，在自定义 data-* 属性中包含完整文本值，例如：

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

   登录后复制

2. JavaScript 事件侦听器：

   为元素的加载和调整大小事件添加事件监听器。这些监听器应该触发一个 JavaScript 函数，该函数将：

   • 从 data-* 属性检索原始文本
   • 将文本放入 span 元素的 innerHTML

3. 省略号函数：

   创建一个省略号函数，在文本超过一定长度时修剪文本。例如：

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

   登录后复制

   根据需要自定义文本长度和位置值。

4. 全文工具提示：

   为了增加可访问性，请考虑在省略号上添加缩写标签，并带有显示全文的工具提示：

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

   登录后复制

以上是如何在可调整大小的元素的文本中实现省略号？的详细内容。更多信息请关注PHP中文网其他相关文章！