0

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

像这样： 

<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>
4

4 回答 4

2

您正在寻找的 CSS 语句可能是：

text-overflow: ellipsis;

quirksmode.org 有一个用省略号 (...) 缩短文本的示例。

对于多行块，请参阅此 Stack Overflow 问题。

于 2013-01-12T21:25:56.997 回答
0

前段时间我遇到了这个问题，虽然text-overflow:ellipsis;对于多行的单行文本非常有效，但我发现ThreeDot jquery 插件非常适合具有更多选项的多行文本。

还有dotdotdot插件。

于 2013-01-12T21:27:59.357 回答
0

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

在不知道您希望如何缩短文本的情况下，恐怕无法给您任何示例。

于 2013-01-12T21:28:13.570 回答
0

如果要将用户输入截断为固定长度，请使用以下
示例创建一个文本区域，将用户输入限制为 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>

如果您希望将此应用于文本框，只需点击此链接

于 2013-01-12T21:32:24.730 回答