如何在可调整大小的元素中实现正确的省略号（Mac 风格）？

在文本中心正确实现省略号（Mac 风格）

为了追求无缝的用户体验，中间文本省略号的问题（“.. .”）提出了一个挑战。我们的目标是在可调整大小的元素中实现此功能，并在元素扩展时保持其功能。

解决方案在于双管齐下的方法。首先，将完整字符串分配给 HTML 中的自定义 data-* 属性：

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

其次，利用 JavaScript 读取此数据并动态调整元素的 innerHTML 以响应加载和调整大小事件。以下函数举例说明了这种方法：

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

可自定义的值允许您适应各种对象，确保在不同宽度下实现最佳显示。通过在省略号或工具提示上合并缩写标签来增强用户体验，为用户悬停时提供额外的上下文：

<abbr title="simple tool tip">something</abbr>

通过熟练地应用这些技术，您可以自信地为用户提供强大且具有视觉吸引力的省略号补充了可调整大小元素的灵活性的解决方案。

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