在html中显示更多按钮

Question

如何在HTML中制作一个show more按钮？我正在通过一个变量导入一些文本，以便显示大约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悲哀坐amet。

显示更多

consectetur adipiscing elit。整数tellus erat，tempor quis dolor a，gravida eleifend leo。奥奇变种。

Answer 1

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

我如何使用它来分割文本，以便预览有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>

---

Re: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>