省略号在文本中间（Mac风格） [英] Ellipsis in the middle of a text (Mac style)

问题描述

我需要在resizable元素中的文本中间实现省略号（...）。 这里是什么样子。所以，

I need to implement ellipsis ("...") in the middle of a text within a resizable element. Here is what it might look like. So,

"Lorem ipsum dolor sit amet. Ut ornare dignissim ligula sed commodo."

成为

"Lorem ipsum dolor sit amet ... commodo."

当元素被拉伸到文本的宽度时，我想让省略号消失。

When the element is stretched out to the width of the text, I want the ellipsis to disappear. How can this be done?

推荐答案

在HTML中，将完整值放在自定义data- *属性中，例如

In the HTML, put the full value in a custom data-* attribute like

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

然后分配加载和 resize 事件监听器转换为JavaScript函数，该函数将读取原始数据属性并将其放在span标签的 innerHTML 中。下面是省略号函数的示例：

Then assign load and resize event listeners to a JavaScript function which will read the original data attribute and place it in the innerHTML of your span tag. Here is an example of the ellipsis function:

function start_and_end(str) {
  if (str.length > 35) {
    return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
  }
  return str;
}

调整值，如果可能，对象。如果您有来自不同浏览器的用户，您可以从文本中以相同的字体和大小在dom中的其他位置窃取参考宽度。然后插入适当数量的字符以使用。

Adjust the values, or if possible, make them dynamic, if necessary for different objects. If you have users from different browsers, you can steal a reference width from a text by the same font and size elsewhere in your dom. Then interpolate to an appropriate amount of characters to use.

提示也是在...上有一个abbr标记，或者是让用户能够使用的消息以获取带有完整字符串的工具提示。

A tip is also to have an abbr-tag on the ... or who message to make the user be able to get a tooltip with the full string.

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

这篇关于省略号在文本中间（Mac风格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！