1200字范文 > 子元素宽高未知----子元素在父元素中水平垂直居中 css文字溢出用...代替

子元素宽高未知----子元素在父元素中水平垂直居中 css文字溢出用...代替

时间：2021-04-02 00:41:54

提示：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直接截断文字，不美观，无法知道后续是否还有文字

解决方法：

子元素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>