纯CSS订制文字省略的方式大全

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

WeTest导读

拿到设计方案MM的设计方案稿,Oh NO,点点点后边又双叒叕加內容了,弹丸的地方,劳神费心啊!!可伶大家UI开发设计GG每次不厌其烦说,微臣并不是不做,是办不到啊!很是内疚。而如今,自从用了订制多行省略,腰不酸了,手也不疼了,接起要求来,绝不费力!
 

1、甚么是多行省略?

 当篇幅多到1定水平就显示信息省略号点点点。最开始只是简易的点点点,以后花式愈来愈多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略便是大段文本后边的花样点点点。

同行业这么做:

 

1.Google Plus用全透明到白色的渐变色遮罩,渐变色遮罩在文本超过的情况下才显示信息,但没法挤出文本,且情况只能单色,没理想。
 

2.豌豆荚则更简易粗鲁换行显示信息,换行显示信息则文本未超过时仍然显示信息 ...xxx,更没理想!

大家这样做:

 在QQ访问器的网页页面用了1个原創的mod-more UI组件,完成了订制的多行省略,還是纯CSS的,领跑同行业1大截,赞!赞!赞!只可是,mod-more组件的高宽比是固定不动的。对mod-more进1步进电机化,完善自融入高宽比,并且编码简化易用。

2、如何保证的?

订制多行省略 = 按需显示信息...更多 + 文本外溢断开,按需显示信息...更多是用波动特点完成,文本外溢环节能够用外置波动和line-clamp完成,QQ访问器现有计划方案便是外置波动,但缺陷是高宽比固定不动,应用line-clamp则自融入高宽比,完善!限于篇数,这里只提line-clamp的完成计划方案,QQ访问器将在下环节升級至该计划方案。

基本原理详解!

按需显示信息...更多

<!doctype html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="float:right;margin-left: ⑸0px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。
</div>
<div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
<div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);">...更多</div>
</div>
</body>
</html>

运用右波动基本原理——右波动元素从右到左先后排序,不足室内空间则换行。蓝色块、粉色块、橙色块先后右波动,蓝色块高宽比小于6写作字时,橙色块在右侧,蓝色块高宽比超过6写作字时,左下角恰好够橙色块排序的室内空间,因而橙色块就到左侧了

 

<!doctype html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="float:right;margin-left: ⑸0px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。
</div>
<div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
<div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);left: 100%;-webkit-transform: translate(⑴00%,⑴00%);">...更多</div>
</div>
</body>
</html>

进1步将橙色块偏位到正确部位就大获全胜了!仔细的同学会发现,将橙色块再加渐变色底便是Google Plus在用的计划方案。

 文本外溢断开

<!DOCTYPE html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">
腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。</div>
</div>
</body>
</html>

 -webkit-line-clamp是webkit核心的独享css特性,用于开展多行省略,在安卓系统和ios上全适用。但它固定不动应用省略号,没法立即拓展。并且自带了外溢断开逻辑性,功效于器皿高宽比。细心调查可发现它应用的省略号是单标识符…,能够用文本css特性如font-size,letter-spacing,color等操纵。

 

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*检测*/</style>
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">
腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。
</div>
</div>
</body>
</html>

 设定外器皿的font-size、letter-spacing、color,并在子器皿里修复便可以独立设定省略号。这里外器皿设定font-size的值等于2倍行高(余下要撑开的宽度能用letter-spacing补足,也可仅用font-size撑开所有的宽度),color为transparent便可以让line-clamp既挤出文本又不断开器皿高宽比,外器皿高宽比做到7行而并不是默认设置主要表现的6行,从而做到必须的外溢断开实际效果

合体!订制多行省略

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*检测*/</style>
<div style="position: relative;line-height:18px;-webkit-animation: width-change 8s ease infinite;max-height: 108px;">
    <div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;">
        <div style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;">
        腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。
        </div>
        <div style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing: 0;color: #000;font-size: 12px;background: rgba(173, 216, 230, 0.5);">
            <div style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></div>
            <div style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></div>
            <div style="float: right;width: 50px;height: 18px;position: relative;background: rgba(255, 165, 0, 0.5);" class="">... 更多</div>
        </div>
    </div>
</div>   
</body></html> 

将-webkit-line-clamp完成的文本外溢断开编码为行为主体,叠加肯定精准定位同歩的按需显示信息...更多构造。由于肯定精准定位,这里应用百分比简化编码。最外包1层构造限定最大高宽比。

 

<!DOCTYPE html><html><body>
<style>
/*
 * 行高 h
 * 最大行数 n
 * ...更多器皿的宽 w
 * 字号 f
 */

@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
.ellipsis {
    position: relative;
    background: rgb(230, 230, 230);
    width: 260px;
    max-height: 108px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    -webkit-animation: width-change 8s ease infinite;
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 12px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 108px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 12px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: ⑴8px; /* -h */
}
</style>
<div class="ellipsis">
    <div class="ellipsis-container">
        <div class="ellipsis-content">
 腾迅创立于1998年11月,是现阶段我国领跑的互联网技术升值服务出示商之1。创立10多年来,腾迅1直秉持“1切以客户使用价值为依归”的运营理念,为亿级大量客户出示平稳优良的各类服务,自始至终处在稳进发展趋势情况。2004年6月16日,腾迅控股比较有限企业在中国香港联交所主板公布发售(个股代号700)。</div>
        <div class="ellipsis-ghost">
            <div class="ellipsis-placeholder"></div>
            <div class="ellipsis-more">...更多</div>
        </div>
    </div>
</div>   
</body></html>

将橙色块偏位到正确部位,整理了下编码,最后完成了自融入高宽比的订制多行省略,完善!从此妈妈不再担忧我在省略号后边加物品改物品了!恭贺你战胜99%的同行业了!

 3、为何这么做?

line-clamp有3宗罪

和 text-align:justify 1起用会使省略号和文本相叠

 

 超过断开后会截掉一部分行高

 

 省略号出現在单词正中间 

订制省略自然某难题啦

ext-align:justify时按期所示,没难题!

 

断开时按期所示,也没难题!

 

省略号在有单词时按期显示信息,仍然没难题!

更别说点点点花式增改

简易增改文本加连接只是小case

 

用折角還是别的照片表明文字外溢能够增加趣味性

 

外溢时显示信息外溢篇幅提升了好用主要用途

 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。