Question

[更新]它与这个问题有所不同，因为它不仅要求文本截断;正如我所提到的，我已经使用this approach进行了文本截断。相反，它要求有更多的＆＃34;阅读更多＆＃34;仅在文本被截断时链接（如果可能，仅使用CSS）。

目前我正在使用this approach在文本溢出时生成省略号（当它无法放入一行时）。但是，现在我还要包括一个“阅读更多”和“＃39;发生溢出时链接在行尾，单击该链接将显示多行的所有内容。这只适用于CSS吗？

顺便说一下，我看到this post，显示＆＃34;更多＆＃34;链接无论文本是否溢出，这都不是我想要的。

我想最后的方法是使用带有resize()侦听器的javascript，动态隐藏文本的溢出部分并创建显示它们的链接。

谢谢！

Answer 1

仅使用 CSS无法实现。

这是我非常讨厌的解决方案：在JavaScript中，删除.truncate类以获取未截断的宽度，然后生成一个读取更多链接，如果文本的宽度将导致它截断。

＆＃13;

var truncated = document.getElementsByClassName("truncate");

for (var i = 0; i < truncated.length; i++) {
    var t = truncated[i];

    // Remove the truncate class to get at the un-truncated width
    t.classList.remove("truncate");
    t.style.display = "inline-block";
    // w = un-truncated width
    var w = t.clientWidth;
    // Restore styling
    t.style.display = "";
    t.classList.add("truncate");

    // 250 corresponds to the width in the CSS
    if (w >= 250) {
        // Generate read more link
        var readMore = document.createElement("a");
        readMore.href = "#";
        readMore.innerText = "Read More";
        t.parentNode.insertBefore(readMore, t.nextSibling);
    }
}

＆＃13;

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

＆＃13;

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iusto quos praesentium et cupiditate nostrum, suscipit voluptates sint eos amet vel quisquam, consequuntur hic necessitatibus, quibusdam ex repellat error odio.</div>
<hr>
<div class="truncate">Hello</div>

＆＃13;

Answer 2

你需要JS才能做到这一点。你可以在jQuery中做这样的事情：

var str = "this is some truncated te..."; //Your string to eval
var n = str.search("..."); //look for the elepsis 
if (n ==="" || n === null){ //if the elepsis is not found in the string
   $(".foo").hide(); //hide your read more link
}else{
   $(".foo").show(); //show your read more link
}

注意：这回答了问题的第二部分 - 第一部分由另一张海报回答。

Answer 3

如果您使用CSS类截断文本，为什么不使用同一个类隐藏或显示链接？

a.read-more {
display: none;
}

.truncate a.read-more {
display: block;
}

如果您的所有项目都设置了课程，无论内容如何，您都需要使用JavaScript，如Marcello的评论中所述。

生成省略号和＆＃34;阅读更多＆＃34;与CSS

3 个答案: