Question

如何在HTML中显示更多按钮？我正在通过变量导入一些文本，该变量如何使它能够显示20个字符，而按下按钮则显示其余字符。这就是我现在拥有的：

$array = explode("<br>", $array_build->content);
foreach( $array as $key => $value){
    if (
        strpos(strtolower($value),'value1') !== FALSE ||
        strpos(strtolower($value),'value2') !== FALSE ||
        strpos(strtolower($value),'value3') !== FALSE ||
        strpos(strtolower($value),'value4') !== FALSE
    ) {
        unset($array[$key]);
    }
};

$newcontent = "<pre>".implode("\n",$array)."</pre>";
?>

<div style="margin-top: 50px;"></div>
<style>
.button {
    border-radius: 4px;
    background-color: #002B56;
    color: white;
    padding: 14px 40px;
    }
</style>
<div style="text-align: center;">

<script type="text/javascript">
function toggle(obj) {
          var obj=document.getElementById(obj);
          if (obj.style.display == "block") obj.style.display = "none";
          else obj.style.display = "block";
}
</script>
<a class="button" href="javascript: void(0);" onClick="toggle('q1')">
Show More
</a>
<div style="margin-top: 50px;"></div>
<div id="q1" style="display:none;">
<div class="col" style="width: 100%;"><?= $newcontent ?></div>
</div>
</div>

我想要的输出：

Lorem ipsum dolor坐下来。

了解更多

奉献精粹。整数特鲁斯·埃拉特（tempor quis dolor a），格雷迪达·伊利弗德·利奥（gravida eleifend leo）。腹腔静脉曲张。

Answer 1

根据我的评论，这是一个使用<details><summary>且没有任何JavaScript的有效示例。

如何使用它来分割文本，以使预览中包含大约20个字符，而摘要中包含其余字符？

请注意，前几个词在可点击的<summary>元素中是如何出现的，而其余的则在外面：

details > summary {
    float: left; /* This makes the <summary> appear inline, as `display: inline` won't work here. */
    cursor: pointer; /* Show the hand cursor. */
    margin-right: 0.25em; /* Needed otherwise the space disappears, alternatively use `&nbsp;` at the end of the summary */
}

<details>

    <summary>Lorem ipsum dolor sit amet</summary> consectetur adipiscing elit.
    Integer molestie diam sit amet scelerisque rhoncus. Sed arcu magna, fermentum
    nec hendrerit non, vestibulum nec enim. Nulla orci justo, hendrerit sit amet
    semper et, ullamcorper quis ipsum. Etiam a justo sed augue elementum accumsan
    non id neque. Vivamus volutpat interdum nunc non ultricies. Interdum et
    malesuada fames ac ante ipsum primis in faucibus. Nullam justo lacus, sodales
    quis blandit non, feugiat ut lacus. Phasellus tempus sodales dui, eu auctor
    elit. Nam fermentum ipsum in posuere luctus. Maecenas volutpat posuere diam,
    ut laoreet orci iaculis et.

</details>

回复：PHP

在使用PHP呈现HTML时，请使用PHP的strpos和substr来获取字符串中可以安全分割的点（在这种情况下：它将寻找第一个空格）字符20之后的字符）：

<?php

    // This PHP code is very verbose so you can understand how it works. It can be made much more shorter and succinct if necessary.

    $newcontent = "Lorem ipsum dolor...";

    $newcontentSummary   = '';
    $newcontentRemaining = '';

    $newcontentSummaryEndIdx = strpos( $newcontent, ' ', 20 );
    if( $newcontentSummaryEndIdx !== false ) {
        $newcontentSummary   = substr( $newcontent, 0, $newcontentSummaryEndIdx );
        $newcontentRemaining = substr( $newcontent, $newcontentSummaryEndIdx );
    }
?>

[...]

<?php if( $newcontentRemaining ): ?>
<details>
    <summary><?= htmlentities( $newcontentSummary ) ?></summary>
    <?= htmlentities( $newcontentRemaining ) ?>
</details>
<?php else: /* The $newcontent string is too short, so just render it directly: */ ?>
<p><?= htmlentities( $newcontent ) ?></p>
<?php endif; ?>

Answer 2

我认为，您需要使用溢出和空白属性。

以下是基于您的代码的示例：

.button {
    border-radius: 4px;
    background-color: #002B56;
    color: white;
    padding: 14px 40px;
}
.text-container{
    margin-top:20px;
    width:350px;
    display:inline-block;
  }
  .text-hidden{
     white-space: nowrap; 
     overflow: hidden;
     text-overflow: ellipsis; 
     width:210px;
  }

<div style="text-align: center;">

<script type="text/javascript">
function toggle(obj) {
      var obj=document.getElementById(obj);
  
      if (obj.classList.value.split(' ').includes("text-hidden")) 
        obj.classList.remove('text-hidden');
      else 
        obj.classList.toggle('text-hidden');
}
</script>
<a class="button" href="javascript: void(0);" onClick="toggle('q1')">Show More</a>
  <div>
<span id="q1" class="text-container text-hidden" >
   Lorem ipsum dolor sit amet.
  Consectetur adipiscing elit. Integer tellus erat, tempor quis dolor a, gravida eleifend leo. Orci varius.
</span>
</div>
  
</div>

在HTML中显示更多按钮

2 个答案: