如果文本的長度大於某個值，如何添加閱讀更多按鈕

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>

如果字符串太長，則截斷字符串，如果字符串太長，則顯示省略號。 另外，如果不需要，不要使用按鈕，它看起來很糟糕。