又一个 wordpress 站点,建设银行广西分行网站,淘宝直通车推广怎么做,怎样制作wordpress主题汉化包场景#xff1a;文章标题过长时#xff0c;只显示一行#xff0c;且多余的部分用省略号显示。
最终效果图#xff1a; 实现时#xff0c;flex布局#xff0c;出现问题#xff1a;
发现text-overflow: ellipsis不生效#xff0c;省略符根本没有出现。 而且因为设置了 …场景文章标题过长时只显示一行且多余的部分用省略号显示。
最终效果图 实现时flex布局出现问题
发现text-overflow: ellipsis不生效省略符根本没有出现。 而且因为设置了 nowrap 发现文字将f-content 撑开导致内容超出了屏幕。 原始代码
div classflexdiv classf-avatarxc-name-avatar nameavatar图片/xc-name-avatar/divdiv classf-contentdiv classrow line文章标题文章标题文章标题文章标题文章标题文章标题文章标题/divdiv classrow margin-t-smspan classarticle-tag文章标签/spanspan classpull-right2023.08.04/span/div/div
/div
style.flex{display: flex}.f-avatar{padding-right: 10px}.f-content{flex: 1}.line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/style
解决办法
尝试取消.flex容器的display: flex省略号出现。又想到省略号需要固定父级宽度。
方法一尝试对父元素.f-content设置width: 100%无效但是设置width: 0可行即
.f-content{flex: 1;width: 0}
方法二、如果不设置宽度.f-content可以被子节点无限撑开因此.line总有足够的宽度在一行内显示所有文本也就不能触发截断省略的效果。
.f-content{flex: 1;overflow: hidden}
上面的二种方法都可以达到我们需要的效果。
