字符串最多2行, 溢出文字省略号代替

作者: Oo晨晨oO | 来源:发表于2018-01-23 16:06 被阅读10次

字符串最多2行, 溢出文字省略号代替
三十五、溢出的文字省略号显示
前端工作中常用 CSS
css/js 控制文本行数并且将溢出内容以省略号代替
CSS tips（持续更新...）
CSS实现单行多余文字溢出显示省略号|多行文字溢出显示省略号|固
文字溢出的时候用省略号代替
css文字溢出的处理
多级flex布局文字溢出省略号失效
文本溢出省略号表示

html中:

<div class="two-line-string">
    <span>这里写文字</span>
</div>

css中:

.two-line-string {
        width: 240px;
        height: 48px;
        padding-right: 20px;
        line-height: 24px;
        // ------核心代码------
        display: flex;
        flex-direction: row;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
        justify-content: center;
        // ------核心代码------
      }

字符串最多2行, 溢出文字省略号代替
html中: css中:
三十五、溢出的文字省略号显示
一、溢出的文字省略号显示 1.1、单行文本溢出显示省略号---必须满足三个条件 1.2、多行文本溢出显示省略号多...
前端工作中常用 CSS
文字溢出省略号文字单行溢出: 多行文字溢出: 渐变边框渐变: border有个border-image的属性，...
css/js 控制文本行数并且将溢出内容以省略号代替
要将文本溢出内容用省略号 “……” 代替可用 overflow: hidden；text-overflow: ...
CSS tips（持续更新...）
处理文字溢出省略号代替：使用box-shadow，制作四周阴影：移动端viewport “三件套” ：让元素...
CSS实现单行多余文字溢出显示省略号|多行文字溢出显示省略号|固
单行多余文字溢出显示省略号效果图: 多行多余文字溢出显示省略号效果图: 固定区域纵向滚动效果图: 固定区域横...
文字溢出的时候用省略号代替
.box1 { width: 150px; height: 80px; ...
css文字溢出的处理
1.单行文字溢出并用省略号表示溢出部分 .hide{ overflow:hidden;//隐藏溢出 white-s...
多级flex布局文字溢出省略号失效
场景描述商城购物车元素左右布局的内容商品描述，使用多级flex布局时，文字溢出以省略号代替会出现失效的情况解决...
文本溢出省略号表示
文本溢出省略号表示老铁们今天详细说一个在网页中有好多地方用到的组合属性——单行文本溢出用省略号代替：例如下图： ...