css实现内容裁剪
创始人
2025-07-09 12:51:57
0次

1、实现单行内容裁剪，后跟省略号

<div style="width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">.NET 8 是 .NET 7 的 后续任务。 作为长期支持（LTS）版本，它将支持三年 。</div>

效果如下：

image.png


2、实现多行内容裁剪

<div style="width:150px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;">.NET 8 是 .NET 7 的 后续任务。 作为长期支持（LTS）版本，它将支持三年 。</div>

效果如下：

image.png

说明：

（1）display: -webkit-box; 为将对象作为弹性伸缩盒子模型显示 。

（2）-webkit-box-orient为设置弹性伸缩盒子模型的子元素的排列方式 。

（3）-webkit-line-clamp是用来限制一个块元素内显示的文本的行数。 

（4）text-overflow: ellipsis; 为用省略号“…”隐藏超出范围的文本 。


上一篇：弹性布局

下一篇：没有了

相关内容

热门资讯

php的安装与配置 一、linux（centos）1、nginx的安装与配置新建文件/etc/yum.repos.d/n...
关于css的text-inde... p{text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/}可加了...
css实现强制不换行/自动换行... 强制不换行white-space:nowrap;自动换行word-wrap: break-word;...
自定义复选框样式 input[type="checkbox"] {appearance:none;-webkit-ap...
js设置html属性和CSS属... js设置html属性：（1）添加属性对象名.属性名=值对象名.setAttribute("属性名",...
fetch方式发送请求 1、以get方式发送查询字符串fetch("server.php?查询字符串"[,{method:"...
swoole的安装 linux下安装swoole需先安装好php。（1）下载swoole源码，解压后进入源码目录，执行如...
php swoole实现web... 1、使用http连接websocket（ws://）服务器端：
css实现内容裁剪 1、实现单行内容裁剪，后跟省略号overflow:hidden;text-overflow:elli...
html字符实体（转义字符） html字符实体（转义字符）的格式为：（1）&name; //name为名称...