我的CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
现在它显示内容内容
但是我想展示 内容内容…
我需要在内容后面显示点。内容动态地来自数据库。
我的CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
现在它显示内容内容
但是我想展示 内容内容…
我需要在内容后面显示点。内容动态地来自数据库。
当前回答
为此,您可以使用text-overflow: ellipsis;财产。像这样写
跨度{ 显示:inline-block; 宽度:180 px; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿了一大堆铅字,把它们胡乱拼凑成一本铅字样本书</span>
JSFiddle
其他回答
如果你正在使用ES6,它可以用三元操作符和模板字面量来创建
function add3Dots(text, limit)
{
return text.length > limit ? `${text.substring(0, limit)}...` : text;
}
首先,你做一个div标签设置宽度,在里面做p标签,然后添加文本,并应用下面给出的代码。 当你的p标签达到div标签的宽度时,“…”将被应用。
-
列表项
`div > p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}`
我认为你正在寻找文本溢出:省略与空白:nowrap结合
点击这里查看更多细节
你可以试试这个:
.classname { 宽度:250 px; 溢出:隐藏; 文本溢出:省略; }
为此,您可以使用text-overflow: ellipsis;财产。像这样写
跨度{ 显示:inline-block; 宽度:180 px; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿了一大堆铅字,把它们胡乱拼凑成一本铅字样本书</span>
JSFiddle