如果文本的长度大于某个值，如何添加阅读更多按钮

Question

如果评论的长度大于 80 个字符，我会尝试显示阅读更多按钮。 这就是我检查它的方式

<tr repeat.for="m of comments">
<td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ... "}</td>
</tr>

所以如果它大于 80 它会显示“...”但是在点的末尾我想添加一个按钮所以我尝试了这个

 <td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ...<button>Read More</button> "}</td>

但随后它弄乱了我的 html 结构并将其显示为

如何在 ${this function} 中正确构建 html？

我无法在 $ { } 之后添加按钮，因为即使字符少于 80 个，它也会显示出来。

注意：我没有使用省略号，因为我需要字符长度

Answer 1

不确定这是否会有所帮助，但我认为使用字符长度不是一个好主意，原因如下：

iiiiiiiiiiiiiiiiiiiii...

嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯...

这两行都有 20 个字符，但行的宽度截然不同（除非您使用的字体具有相似的宽度字符）。 您可以使用带有以下代码的行数的 CSS 来执行此操作：

display: '-webkit-box',
'-webkit-line-clamp': <number of lines>,
'-webkit-box-orient': 'vertical',
overflow: 'hidden',

用该特定 div 中的文本行数替换行数。

或多或少您可以使用 span 标签而不是按钮，给它绝对位置并将其放在文本之后。

Answer 2

在 Aurelia 中 if.bind 是决定是否应显示标签及其内容的条件。 因此，根据您所写的内容，您要说的是。 '如果 showLess 为真，则显示此标签及其内容'

看来你想要的是'如果这个字符串的长度超过 80 个字符，然后截断它并显示一个省略号'

我没有使用 Aurelia，但你想要类似的东西。

 <td>${m.comment.length < 80 ? m.comment : m.comment.substr(0,80)} <a if.bind=`${m.comment.length > 80}` href=# click.delegate="someFunc()">...</a></td>

如果字符串太长，则截断字符串，如果字符串太长，则显示省略号。 另外，如果不需要，不要使用按钮，它看起来很糟糕。