Question

我需要制作一个有高度和宽度锁定的盒子。如果文本内容超出了框的高度，我希望它自动缩短。

像这样：

<div style="height:100px; width:100px; border:solid 1px #000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque gravida augue, in luctus nibh feugiat et. In lacinia.
</div>

Answer 1

您正在寻找的CSS声明可能是：

text-overflow: ellipsis;

使用省略号（...）缩短文本，quirksmode.org has an example。

对于多行块，请参阅this Stack Overflow question。

Answer 2

我有一段时间没有这个问题，而text-overflow:ellipsis;适用于多行的单行文本，你想要限制高度我发现ThreeDot jquery插件很适合多行文字更多选择。

还有dotdotdot插件。

Answer 3

这是溢出 CSS属性的用途，您可以在[QuirksMode]上看到它的示例。1

如果不知道你想要什么，文本缩短就不能给你任何一个例子，我害怕。

Answer 4

如果要将用户输入截断为固定长度，请使用以下
该示例创建一个textarea，将用户输入限制为100个字符，并向用户显示剩余计数。

第1步 - 创建功能

将以下代码插入页眉：

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

第2步 - 创建文本区域

使用以下代码创建表单和文本区域（如有必要，请更改表单和文本区域的名称以满足您的需要）：

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

如果您希望将其应用于文本框，请转到this link

填写文本超出其限制的框

4 个答案: