文本中间的省略号（Mac风格）
我需要"..."在可调整大小的元素内的文本中间实现省略号（）。这是可能的样子。所以，
"Lorem ipsum dolor sit amet. Ut ornare dignissim ligula sed commodo."
变成
"Lorem ipsum dolor sit amet ... commodo."
当元素延伸到文本的宽度时，我希望省略号消失。如何才能做到这一点？
问题答案：
在HTML中，将完整值放在自定义data- *属性中，例如
<span data-original="your string here"></span>
然后分配load和resize事件侦听器的JavaScript函数，将读取原始数据属性，并将其放置在innerHTML您的跨度标签。这是省略号功能的示例：
function start_and_end(str) {
if (str.length > 35) {
return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
}
return str;
}
调整值，或者如有必要，对不同的对象将其设为动态。如果您有来自不同浏览器的用户，则可以从dom中其他位置使用相同的字体和大小从文本中窃取参考宽度。然后插入适当数量的字符以供使用。
提示还应在…上带有缩写标签，或提示谁使用户能够获得带有完整字符串的工具提示。
<abbr title="simple tool tip">something</abbr>
-
问题内容： 我正在固定一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。 有没有一种非js的方法来切断溢出的文本并附加省略号？text-overflow：省略号不适用于元素（至少在Chrome中）。 问题答案： HTML在表单控件中指定的内容非常有限。这就为操作系统和浏览器制造商留下了做他们认为合适的空间（例如，iPhone的模式，当打开时，它看起来与传统的弹出菜单完全不同）。 看起来大多数
-
问题内容： 我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术： 请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。 我更喜欢仅CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，
-
我正在尝试实现以下布局：一个网格有几个固定宽度的列，其中一列包含未知宽度的内容，它将由多个元素组成，不会换行，并且必须用省略号截断。 一个更具体的例子： 以下是我使用flexbox尝试但未成功的内容： 同样的例子在jsbin上 我还尝试使用内联网格而不是flexbox，这也没有任何帮助（jsbin上的示例）。 有没有办法让这一切顺利进行？ 免责声明：我意识到这个问题的变体已经被问及堆栈溢出；但所有
-
我一直在使用空格：不换行，文本溢出：省略号和溢出：隐藏的CSS属性为多行文本创建省略号截断。但是，这在使用弹性框时不起作用。 使用flex时，text-overflow:省略号似乎总是将flex项的高度截断为一行。 对于多行文本，是否可以使用flex和css省略号截断的组合？ 我可以让它在单行截断的情况下工作。手动设置高度与flex空格：nowrapp不起作用。
-
问题内容： 我在页面上有一个块元素集合。它们都设置了CSS规则的空白，溢出，文本溢出，以便修剪掉溢出的文本并使用省略号。 但是，并非所有元素都会溢出。 无论如何，我可以使用JavaScript来检测哪些元素正在溢出吗？ 谢谢。 补充：我正在使用的示例HTML结构。 SPAN元素始终适合单元格，它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。 问题答案： 很久以前，我需要这样做，
-
问题内容： 我正在使用。我想找到一个与此CSS类等效的SVG，如果文本从其包含的div中流出，则会添加省略号： 这是我的SVG： 它的生成如下： 当前文本溢出并且与rect元素重叠。 我有什么办法可以说：“如果文本大于特定宽度，则将其裁剪并添加省略号”？ 问题答案： 我不知道SVG的等效CSS类，但是您可以用来将HTML嵌入SVG。这使您可以使用此功能，并且通常更灵活（例如，您可以轻松进行自动换行