CSS——解决文本溢出／自动换行／文字两端对齐

青旅半醒 2022-05-23 02:45 549阅读 0赞

1 单行文本溢出

  1. .text{
  2.     width: 100px;//宽度要定义好
  3.     overflow: hidden;//溢出隐藏
  4.     text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。
  5.     white-space: nowrap;//文字不换行
  6. }

2 多行文本溢出

  1. .text-more{
  2.     width: 100px;
  3.     overflow: hidden;
  4.     text-overflow: ellipsis;
  5.     display: -webkit-box;//必须结合的属性，将对象作为弹性伸缩盒子模型显示
  6.     -webkit-line-clamp:2;//控制文本的行数
  7.     -webkit-box-orient:vertical;//必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 
  8. }

发表评论

表情：
评论列表 （有 0 条评论，549人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

    你的名字你的名字/ 0 赞/ 786 阅读