多行文本自动换行添加省略号

最新推荐文章于 2023-02-27 23:51:32 发布

拼客骏

最新推荐文章于 2023-02-27 23:51:32 发布

阅读量223

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_48914823/article/details/116648646

版权

直接上代码：

在这里插入代码片<style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 120px;
      border: 1px solid cyan;
      /* 主要代码 */
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      /* 修改-webkit-line-clamp 可以实现 隐藏3行之后的代码，如果代码没有三行则无作用  (必要时刻可以用js拼接字符+'...'来实现)*/
      -webkit-line-clamp: 3;
      word-wrap: break-word;
    }
  </style>

</head>

<body>
  <div class="box">

    2222222222222222222222222222222222222222222222222222222222222

  </div>
  
</body>

效果图如下：
在这里插入图片描述
如果情况更加复杂利用css完成比较困难，就要利用 js 方法拼接字符串（+"…"）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

拼客骏

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多行文本自动换行添加省略号

## 标题文本字数不确定，实现自动换行添加省略号直接上代码：在这里插入代码片<style> * { padding: 0; margin: 0; } .box { width: 120px; border: 1px solid cyan; /* 主要代码 */ overflow: hidden; display: -webki...
复制链接

扫一扫