Question

我试图实施一些限制<li>的大小。功能是你可以写一篇包含n个字符的文章，但它应该只显示500字符然后我想放一个像阅读更多的按钮。

目前我有按钮，如果文字是500个字符，但我无法找到如何限制尺寸......

有人可以给我建议吗？

Answer 1

您始终可以使用子字符串仅获取输入的字符子集，并在鼠标悬停时重新显示

在MouseOver上使用子字符串来更改li tag内的文本。

var myLi = $('#your-li-id');
myLi.text(myLi.text().substring(0,500))

Answer 2

你可以用jQuery做到这一点。看看这个：

$(document).ready(function() {
    var count = $("#count").text().length;
    var max = 5 // Max chars inside the li
    if (count > max) {
    	$("#count").text($("#count").text().slice( 0, max ));
    	$("#count").append(" read more..."); // Add here your button or whatever you like.
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="count">1234567890</li>
</ul>

希望这会有所帮助。

Answer 3

也许你可以用一些CSS来设计它？喜欢:(你必须定义它的宽度）

overflow: hidden;
text-overflow: ellipsis;

而且只有点击按钮然后在CSS显示完整文章中使用jquery更改类？

Answer 4

你可以试试这个：

for (int i = 0; i < SORT_OPTIONS.count; i++) {
        NSLog(@"your array - %@", [SORT_OPTIONS objectAtIndex:i]);
    }

https://jsfiddle.net/AwadheshVerma/7r4nac49/

如果你想点击：

<li id="demo">Some lenghty string goes here</li>
function myFunction() {
var str = "Hello world!";
var res = str.substring(1, 4);
document.getElementById("demo").innerHTML = res;
}myFunction();

如何限制＆＃39; <li>＆＃39;的大小。元件

4 个答案: