css 动态实现文字超长显示...

原创已于 2022-04-24 09:57:31 修改 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #scss

于 2022-03-28 16:18:25 首次发布

CSS 同时被 2 个专栏收录

2 篇文章

订阅专栏

scss

1 篇文章

订阅专栏

本文介绍如何使用CSS实现文字超长后的自动省略显示，并保持右侧图片始终完全展示。通过响应窗口大小变化，动态调整文字显示长度。

文字超长后显示点点点（省略`...`）

上效果图：

大屏下
小屏下

要求

响应window resize事件，空间足够全部显示，空间不足显示 ...
文字右边图片区域始终显示（不响应window resize事件）
大屏下，红色部分全部显示，小屏下显示...
手动缩小屏幕动态缩小如上图

分析：其实就是右边图片部分尺寸不变，左边文字区域动态改变
话不多少上代码：

.tltle-desc {
    width: calc(100% - 75px);
        .title{
          height: 33px;
          line-height: 33px;
          color: #222222;
          font-size: 26px;
          letter-spacing: 0;
          font-weight: 500;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
        }
}