css 实现单行、多行文本显示

1.单行显示文本，超出显示省略号，很容易实现（需要加宽度width属来兼容部分浏览）：

width:200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2.多行文本显示，限制行数，超出显示省略号，如下实现：

width:200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.多个字符限制不换行，横向缩放，来实现固定宽度内，中英文字符不一致，显示效果不换行且优雅好看：

<div class="onelinelabel" ><b v-if="$i18n.locale==='cn'||$i18n.locale==='ja'||$i18n.locale==='ko'||$i18n.locale==='tw'" :style="$t('m.fileName').length>6?'transform:scaleX('+5/$t('m.fileName').length+');':''">1{{$t('m.fileName')}}</b><b v-else :style="$t('m.fileName').length>10?'transform:scaleX('+10/$t('m.fileName').length+');':''">2{{$t('m.fileName')}}</b>
</div>

.onelinelabel{float: left;width: 90px;text-align: right;font-size: 14px;b{transform-origin: right;float: right;display: inline-block;margin-right: 2px;font-weight: normal;white-space:nowrap;}
}

如上效果借助vue项目中 i18n翻译和vue样式变换，仅作为参考。

css 实现单行、多行文本显示相关推荐

css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
[css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS 控制单行或者多行文本超出显示省略号
1.单行文本 p {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段 ...
css实现单行、多行文本超出省略号(...)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
css实现单行、多行超出显示省略号兼容火狐
css 单行,超出部分显示省略号 p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号white-space:nowarp;//不允 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
单行溢出文字省略号显示（HTML、CSS）
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...

css 实现单行、多行文本显示

css 实现单行、多行文本显示相关推荐

最新文章

热门文章