Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

text-overflow #46

Open
vicvinc opened this issue Sep 12, 2016 · 7 comments
Open

text-overflow #46

vicvinc opened this issue Sep 12, 2016 · 7 comments

Comments

@vicvinc
Copy link

vicvinc commented Sep 12, 2016

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

@xcatliu
Copy link
Member

xcatliu commented Sep 12, 2016

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

@xcatliu xcatliu added the bug label Sep 12, 2016
@xcatliu xcatliu modified the milestone: v1.0.0 Sep 12, 2016
@vicvinc
Copy link
Author

vicvinc commented Sep 14, 2016

@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
Copy link
Member

xcatliu commented Sep 14, 2016

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

@vicvinc
Copy link
Author

vicvinc commented Sep 14, 2016

幸苦 👍

@xcatliu xcatliu added the task label Sep 17, 2016
@xuanye
Copy link

xuanye commented Sep 20, 2016

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

@vicvinc
Copy link
Author

vicvinc commented Sep 20, 2016

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

@xcatliu
Copy link
Member

xcatliu commented Sep 30, 2016

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

@xcatliu xcatliu removed this from the v1.0.0 milestone Sep 30, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants