Question

我有一大块文字，我只想在显示“查看更多”链接之前显示这么多字符。

所以我做了：

{{1}}

这样可行，但看起来像这样：

突然显示的文字 查看更多
这是要扩展的文本。

因此，它会在中间区分带有摘要标记的短语。我一直试图让文本向上扩展，或者换句话说，使摘要显示在扩展文本下方，以便该短语继续流畅，但没有成功。

尝试将摘要标记移动到结束，就在结束详细信息标记之前，但结果是相同的。

有没有办法实现这个目标？

Answer 1

添加

display:inline

实施例

＆＃13;

<p style="display:inline";>Text being displayed when suddenly
<details style="display:inline;">
<summary>View More</summary>
here comes the text to be expanded.
</details></p>

＆＃13;

Answer 2

经过大量的反复试验，然后深入挖掘研究模式后，我遇到了一个解决方案。

事实证明，我能找到的最好方法是通过JQuery代替。

（非常感谢Max，无论你是谁/无论你在哪里，因为这支笔https://codepen.io/maxds/pen/jgeoA/让我免于麻烦！ - 你可能想看一下，看看我的问题是什么关于，万一你想知道...）

所以，按照我的例子，我现在有了这个：

<span class="more">Text being displayed when suddenly here comes the text to be expanded</span>

这就是Html部分。我去了一个span标签，但你可以用同样的方式使用div。

现在我只需要通过JQuery定位该类，并确定在隐藏文本之前我希望它显示多少个字符。

在我的情况下，我去了200个字符。

这是JQuery代码：

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 200;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "VEJA MAIS >";
var lesstext = "MOSTRAR MENOS";


$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});
});

现在通过此代码处理“显示更多”按钮。

它确实是一个链接，你可以通过它的类“.more link”来设置它，以便以任何你想要的方式显示它。在我的情况下，我选择了按钮样式，并使用了这个CSS：

.morelink {
display: block;
float: right;
padding: .5em;
margin-top: .5em;
color: white;
background-color: rgb(63,72,71);
width: 50%;
text-align: center;    
}

当然，宽度，边距和浮动参数是我根据我正在使用的布局做出的决定。

而且，是的，我得到了我想要的东西！现在，“显示更多”按钮/链接不仅会在文本显示后向下流动，而且我现在可以通过简单地在内部找到相应的var来更改它显示的文本（例如“显示更少”） JQuery代码（var moretext和var lesstext）。

真棒！

希望这也可以帮助其他人。

Answer 3

您没有正确嵌套代码，打开<p>然后打开<details>，然后关闭<p>。我已经更新了我的答案，因为我对这两个标签知之甚少。

行：

HTML5默认提供切换功能，包括内容在内的这些标签的正确嵌套是：

<details>
    <summary>Clickable preview or summary</summary>
    Your additional, long content goes here. This can be long paragraphs,    tables, basically everything.
</details>

这足以实现默认浏览器功能的切换，我想你想要。正如我在之前的回答中所说，Microsoft Edge / IE不支持它。对于所有这些，您不需要<p>标记。

我做了一件简单的事情：谷歌搜索：）

http://blog.teamtreehouse.com/use-details-summary-elements

使用<details>＆amp;扩展文本<summary> HTML5标签

3 个答案: