用几个点替换多个HTML文本的结尾

Question

我有以下标记:

if ($('.replacetext').text().length > 20) {
var linkText = $('.replacetext').text();
$('.replacetext').html(linkText.substring(0, 20) + "...")
$('.replacetext').on("click", function(e) {
console.log("linkText :: ", linkText);
$('.replacetext').html(linkText);
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h5>
<a class="replacetext" href="">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<h5>
<a class="replacetext" href="">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>

我怎样才能使它，如果h5文本(h5可能不止一个)超过一定数量的字符，我摆脱了其他字符，并将它们替换为"…"?

这段代码的问题是它也用点替换了所有h5标签上的文本。

Answer 1

首先我要重新考虑a标记的使用。你没有链接。用别的东西。我把这件事留给你。

接下来，您想要存储原始文本。我将使用数据属性。

最后，您希望只更新被单击元素的文本。我们将使用this关键字在这里提供帮助。

//Go through each long title
$('.replacetext').each(function() {
//If long title
if ($(this).text().length > 20) {
//Store original string in data attribute  
$(this).data("og", $(this).text());
//Replace text
$(this).html($(this).text().substring(0, 20) + "...")
}
});
$('.replacetext').on("click", function(e) {
//Stop the link going anywhere
e.preventDefault();
console.log("Original Text: " + $(this).data("og"));
//Replace with the original
$(this).text($(this).data("og"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h5>
<a class="replacetext" href="">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<h5>
<a class="replacetext" href="">I am another very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<h5>
<a class="replacetext" href="">I am short</a>
</h5>

Answer 2

参见CSS text-overflow Property

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

Answer 3

把这些都加起来。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; // some width

按你的要求多行执行

#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

请注意，这些多行代码目前仅支持web-kit浏览器。

Answer 4

这只是一个概念证明，有许多未处理的潜在缺陷，但是您可以递归地迭代元素的子元素并截断文本节点。

我不是说这是个好主意 。您将遇到空格复杂性和边缘情况。只是说理论上可以这么做。

const TEXT = 3;
const ELEMENT = 1;
function truncateElement (elem, maxlength) {
let remaining = maxlength;

[...elem.childNodes].forEach(node => {
if (node.nodeType === TEXT) {
node.nodeValue = node.nodeValue.substr(0, remaining);
remaining -= node.nodeValue.length;
}
else if (node.nodeType === ELEMENT) {
truncateElement(node, remaining);
}
});

if (!remaining) {
elem.appendChild(document.createTextNode('…'));
}
}
document.querySelector('button')
.addEventListener(
'click',
() => truncateElement(document.querySelector('h5'), 20)
);

<div class="demo">
<h5><a class="replacetext" href="">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a></h5>
<button>Truncate to 20</button>
</div>