mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

text-overflow #46

Open vicvinc opened 7 years ago

vicvinc commented 7 years ago

建议增加一个处理文本溢出的mixin,因为项目中各种title的溢出简直要命;

xcatliu commented 7 years ago

可以给出一些简单的例子吗?

vicvinc commented 7 years ago
@mixin textoverflow ($max-width, $max-height) {
   text-overflow: ellipsis;
   white-space: nowrap; //单行时
   overflow: hidden;
   max-width: $max-width; eg: 100%;
 //max-height: $max-height; // eg: 2em -> 两行
}

类似这样的,单行时,如果超出容器宽度,则省略溢出后的内容,多行时,超出定义的行数后省略溢出内容; 目前接触到的情况暂时有这些

xcatliu commented 7 years ago

多谢建议,我去看看相关资料

vicvinc commented 7 years ago

幸苦 :+1:

xuanye commented 7 years ago

手机端省略之后怎么去看全部的文本呢?和电脑上不同,电脑上还可以用鼠标悬浮查看提示

vicvinc commented 7 years ago

通常是一些没有限制长度,当出现过长的title文本时引起的,如果对所有字段的文本都有了字数限制(比如昵称2-8,主题:6-14)就不存在这个问题,要看的话可以点开再看(折叠效果),还是看具体的UI设计怎么做,考虑不考虑这个问题

xcatliu commented 7 years ago

参考了下其他框架,决定基础样式中不提供相关的样式,后续可以作为 plugin 提供出来,故从 1.0.0 milestone 中移除。感谢建议!