jQuery：只获取未隐藏/隐藏的文本字符

Question

使用以下css代码，我可以确保无论div中有多少行，只会显示3行文本。我正在使用这种方法来引入...的一部分。这句话没有显示出来。

.vslide_text{
  line-height:1.2em;
  height:3.6em;
  overflow:hidden;
}

但是，我需要能够仅提取此元素的非隐藏部分，以便我可以将其拆分并在其后放置3个点。

我找不到如何只选择那些可见的字符。

这可能吗？我在墙上。

小组说什么

杰 CompuMatter

Answer 1

我认为this Thread对您最有帮助。

Answer 2

省略号（三个点的名称）的技巧是 white-space: nowrap ， overflow: hidden 和 text-overflow: ellipsis

这是单行省略号所需的三个CSS属性：

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

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

对于多行，事情变得复杂一些。您首先要像以前一样从overflow: hidden和text-overflow: ellipsis开始。然后，您需要将display设置为-webkit-box，将-webkit-box-orient设置为vertical。然后，您可以使用-webkit-line-clamp指定应显示的行数。

以下示例显示了在Webkit浏览器上跨越三行的相同文本（Chrome和Safari是主要的两行）：

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

请注意，以上仅适用于Webkit浏览器。对于非Webkit浏览器（例如Firefox和Internet Explorer），实际上没有简单的解决方案。对于这些浏览器，我们必须使用 ::after pseudo-element 来使更多复杂化：

.ellipsis {
  /* The ellipsis falls outside the bounds */
  max-width: 96%;
  
  /* Hide the overflow */
  overflow: hidden;
  
  /* Required for the absolutely-positioned `:after` */
  position: relative; 
  
  /* Required for truncation */
  line-height: 1.2em;
  max-height: 3.6em; 
  
  /* The last word would overflow on the right without this */
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}

/* The actual ellipsis */
.ellipsis:after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

希望这有帮助！ ：）

Answer 3

我最终在另一个论坛上找到了解决方案。

最终结果小提琴在这里：https://jsfiddle.net/vaojjr7p/

已经过浏览器测试。

感谢大家一起来看看。

JS：

$('#output').wrapInner('<div/>');
var originaltext = $('#output div').text();

var t = originaltext;

while (true) {
  if ($('#output div').height() <= $('#output').height()) {
    break;
  }

  $('#output div').text(t.substring(0, t.lastIndexOf(" "))+"...");
  t = $('#output div').text();
}

//$('#output div').text(originaltext);

alert('Visible text : "' + originaltext.substring(0, t.length) + '"');
alert('Hidden text : "' + originaltext.substring(t.length) + '"');