使用CSS样式设置文本超出2行显示为省略号

设置文本超出2行显示为省略号

在设计前端页面中，我们经常会遇到文本太长导致超出规定区域的情况。
我们只需要在文本中设置以下样式即可解决该问题：
html页面：

<div class="context"><span class="item">(随便拷贝的) 一天，我发现，一只黑蜘蛛在后院的两檐之间结了一张很大的网。难道蜘蛛会飞？要不，从这个檐头到那个檐头，中间有一丈余宽，第一根线是怎么拉过去的？后来，我发现蜘蛛走了许多弯路--从一个檐头起，打结，顺墙而下，一步一步向前爬，小心翼翼，翘起尾部，不让丝沾到地面的沙石或别的物体上，走过空地，再爬上对面的檐头，高度差不多了，再把丝收紧，以后也是如此。</span>
</div>

css样式

.context {width: 300px;height: 400px;.item {display:-webkit-box;         //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）-webkit-line-clamp:2;        //限制行数overflow:hidden;             //超出部分隐藏text-overflow:ellipsis;      //用一个省略号代替超出的内容}
}

希望能够帮到你！

使用CSS样式设置文本超出2行显示为省略号相关推荐

php 给字符中间添加间距,html中的字符间距怎么设置？css样式设置文本对齐方式总结...
我们经常用的html字符间距总是不好设置,html的文本对齐方式也不会设置,现在这篇文章就来帮助大家了,这里有关于html 字符间距的调整,还有文本的对齐方式设置,现在让我们来看看这篇文章吧首先我们 ...
css 文本超出2行显示点点点
.product-name {// height: 45px;// word-break: break-all;// text-overflow: ellipsis; // text-overflow ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)
效果 <template><div ref="txttype" class="bottom"><div :class=" ...
css样式设置文本框为只读,css怎么将文本框设置为只读
css将文本框设置为只读的方法是,在input文本框中添加readonly属性即可.readonly属性是一个布尔属性,该属性用来规定输入字段是只读的. 本文操作环境:windows10系统.css ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
CSS：实现文本超出显示省略效果（可指定几行显示）
CSS:实现文本超出显示省略效果(可指定几行显示) 代码如下
css样式字体文本汇总
一.长度单位 1:像素 px 实际上是屏幕上的一个个小点,100px,100个小点在pc端,一般情况下1px=1个发光点. 也是我们最常用的长度单位,它是固定单位 2:百分比 % 相对单位,它是相对 ...

使用CSS样式设置文本超出2行显示为省略号

设置文本超出2行显示为省略号

希望能够帮到你！

使用CSS样式设置文本超出2行显示为省略号相关推荐

最新文章

热门文章