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

文本调整大小中的省略号截断

在内容中间用省略号（“...”）截断文本可以增强可读性UI 元素具有可变宽度。实现此效果提出了一个挑战，即当文本完整显示时省略号应该消失。

要在可调整大小的元素中实现省略号：

1. 使用自定义数据属性：

   • 在 HTML 中，将全文分配给自定义数据属性：

2. 设置事件监听器：

   • 添加加载和调整大小事件监听器，触发 JavaScript 函数来填充

3. 省略号函数：

   • 定义一个用于截断文本的 JavaScript 函数（例如“start_and_end”）：

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

   • 根据不同对象和字体的需要调整值（例如 35、20、10）。

4. 动态插值：

   • 考虑使用动态插值，根据字体大小和元素宽度确定要显示的适当字符数.

5. 工具提示辅助功能：

   • 在省略号中添加缩写标签，以在以下情况下启用包含全文的工具提示：

通过实施这些步骤，您可以有效地截断文本元素中间带有省略号的文本，确保当元素完全拉伸时省略号消失文本的宽度。

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