search

博客列表 >CSS设置一行内文字超过宽度不换行且不显示，截断文字加...

CSS设置一行内文字超过宽度不换行且不显示，截断文字加...

晴天
晴天原创
2020年04月11日 20:59:441323浏览

原始效果

  1.  div{
  2.   display: flex;
  3.   flex-flow: column nowrap;
  4. /*父元素设置为弹性盒子，垂直且不允许换行*/
  5. }
  6.  div >  a {
  7.   white-space: nowrap; /*设置文字禁止换行*/
  8.   overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  9.   text-overflow: ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  10. }

使用后效果

上一条：0410flex练习下一条：框模型相关知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多