jQuery：只獲取不隱藏/隱藏的文本字符

Question

使用下面的css代碼我能夠確保無論div中有多少行，都只會顯示3行文本。我正在使用這種方法來「引入......的一部分......」而不是全部顯示。

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

不過，我需要能夠提取僅此元素的非隱藏部分，這樣我可以把它分解出來編3點...之後。

我找不到如何只選擇那些可見的字符。

這可能嗎？我在牆上。

什麼sayeth組

周杰倫 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），實際上沒有簡單的解決方案。

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

希望這有助於：對於這些瀏覽器，我們必須適應甚至更利用::afterpseudo-element複雜！ :)

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) + '"');