省略号在文本中间(Mac风格)

Question

我需要"..."在可调整大小的元素中的文本中间实现省略号().这可能是它的样子.所以,

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

变

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

当元素伸展到文本的宽度时,我希望省略号消失.如何才能做到这一点？

Answer 1

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

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

然后将分配load和resize事件侦听器分配给JavaScript函数,该函数将读取原始数据属性并将其放在innerHTMLspan标记中.以下是省略号函数的示例:

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-tag,或者使用户能够获得完整字符串的工具提示的消息.

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

Answer 2

我想提出解决这个问题的例子.

主要思想是将文本分成两个偶数部分(或者如果长度是奇数则首先是更大的),其中一个最后有省略号,另一个右对齐text-overflow: clip.

所以你需要用js做的,如果你想让它自动/通用 - 就是分割字符串和设置属性.

但它有一些缺点.

1. 单词,甚至字母都没有很好的包装(目前text-overflow: ''仅在FF中有效)
2. 如果在单词之间发生分裂 - 空间应该在第一部分.否则,它将被折叠.
3. 字符串的结尾不应该有任何感叹号,因为direction: rtl- 它们将被移动到字符串的左侧.我认为,可以通过在标签中放置单词的正确部分和::after伪元素中的感叹号来解决这个问题.但我还没有正确地工作.

但是,对于所有这些,它看起来真的很酷,特别是当您拖动浏览器的边框时,您可以轻松地在jsfiddle页面上执行此操作:https://jsfiddle.net/extempl/93ymy3oL/ .或者只是运行下面固定最大宽度的代码段.

扰流板下的GIF:

body {
  max-width: 400px;
}

span::before, span::after {
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;
}

span::before {
  content: attr(data-content-start);
  text-overflow: ellipsis;
}

span::after {
  content: attr(data-content-end);
  text-overflow: '';
  direction: rtl;
}

<span data-content-start="Look deep into nature, and then you " 
      data-content-end=  "will understand everything better"></span>

<br>
<span data-content-start="https://www.google.com.ua/images/branding/g" 
      data-content-end=  "ooglelogo/2x/googlelogo_color_272x92dp.png"></span>

Answer 3

所以我的同事提出了一个不使用额外dom元素的解决方案.我们检查div是否溢出并添加最后n个字符的数据属性.其余的都是用css完成的.

这是一些HTML:

<div class="box">
    <div class="ellipsis" data-tail="some">This is my text it is awesome</div>
</div>
<div class="box">
    <div class="ellipsis">This is my text</div>
</div>

和css:

.box {
    width: 200px;
}

.ellipsis:before {
    float: right;
    content: attr(data-tail);
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

这是强制性的jsfiddle:http: //jsfiddle.net/r96vB/1/

Answer 4

以下Javascript函数将执行中间截断,如OS X:

function smartTrim(string, maxLength) {
    if (!string) return string;
    if (maxLength < 1) return string;
    if (string.length <= maxLength) return string;
    if (maxLength == 1) return string.substring(0,1) + '...';

    var midpoint = Math.ceil(string.length / 2);
    var toremove = string.length - maxLength;
    var lstrip = Math.ceil(toremove/2);
    var rstrip = toremove - lstrip;
    return string.substring(0, midpoint-lstrip) + '...' 
    + string.substring(midpoint+rstrip);
}       

它将用省略号替换中间的字符.我的单元测试显示:

var s = '1234567890';
assertEquals(smartTrim(s, -1), '1234567890');
assertEquals(smartTrim(s, 0), '1234567890');
assertEquals(smartTrim(s, 1), '1...');
assertEquals(smartTrim(s, 2), '1...0');
assertEquals(smartTrim(s, 3), '1...90');
assertEquals(smartTrim(s, 4), '12...90');
assertEquals(smartTrim(s, 5), '12...890');
assertEquals(smartTrim(s, 6), '123...890');
assertEquals(smartTrim(s, 7), '123...7890');
assertEquals(smartTrim(s, 8), '1234...7890');
assertEquals(smartTrim(s, 9), '1234...67890');
assertEquals(smartTrim(s, 10), '1234567890');
assertEquals(smartTrim(s, 11), '1234567890');

Answer 5

经过对 Flex Box 的一些研究后，我发现了这个纯 CSS 解决方案，我认为它非常酷。

<div style="width:100%;border:1px solid green;display:inline-flex;flex-wrap:nowrap;">
   <div style="flex: 0 1 content;text-overflow: ellipsis;overflow:hidden;white-space:nowrap;"> Her comes very very very very very very very very very very very very very very very very very very very long </div>
   <div style="flex: 1 0 content;white-space:nowrap;"> &nbsp;but flexible line</div>
</div>