提示:koa + vue + axios
文章目录
前言一、子元素宽高未知----子元素在父元素中水平垂直居中demo 二、单行文字溢出,用...代替溢出文字三、多行文字溢出,用...代替溢出文字总结前言
开发过程中,经常遇到文字溢出需要用…隐藏多余内容,过程中遇到过各种问题,总结一下。
一、子元素宽高未知----子元素在父元素中水平垂直居中
//父元素.box_father{position: relative;}//子元素.box_child{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }
demo
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box_father{width: 200px;height: 80px;background: #fedcba;margin: 0 auto;position: relative;}.box_child{width: 80%;height: 50%;line-height: 20px;background: #abcdef;color: #666;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style></head><body><div class="box_father"><div class="box_child"></div></div></body></html>
子元素(蓝色)在父元素(米色)中,水平垂直居中
二、单行文字溢出,用…代替溢出文字
问题:文字溢出,用overflow:hidden直接截断文字,不美观,无法知道后续是否还有文字
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box_father{width: 200px;height: 80px;background: #fedcba;margin: 0 auto;position: relative;}.box_child{width: 80%;height: 50%;line-height: 20px;background: #abcdef;color: #666;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style></head><body><div class="box_father"><div class="box_child">愿许秋风知我意,散我心中意难平,那就祝相逢的人,不会走散,走散的人不再相逢!</div></div></body></html>
解决方法:
子元素display必须为block
.box_child{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block; /*默认是block情况可不写*/}
demo
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box_father{width: 200px;height: 80px;background: #fedcba;margin: 0 auto;position: relative;}.box_child{width: 80%;height: 50%;line-height: 20px;background: #abcdef;color: #666;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block; /*默认是block情况可不写*/}</style></head><body><div class="box_father"><div class="box_child">愿许秋风知我意,散我心中意难平,那就祝相逢的人,不会走散,走散的人不再相逢!</div></div></body></html>
三、多行文字溢出,用…代替溢出文字
那如果是多行文字的情况下,需要显示n行,需要怎么办呢
1、示例:2行文字。( -webkit-line-clamp: n;)n行
.box_child{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
demo
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box_father{width: 200px;height: 80px;background: #fedcba;margin: 0 auto;position: relative;}.box_child{width: 80%;height: 50%;line-height: 20px;background: #abcdef;color: #666;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}</style></head><body><div class="box_father"><div class="box_child">愿许秋风知我意,散我心中意难平,那就祝相逢的人,不会走散,走散的人不再相逢!</div></div></body></html>
总结
踩坑路漫漫长@~@