CSS3 width:fit-content属性
来源:互联网 发布:淘宝访问量怎么提高 编辑:程序博客网 时间:2024/05/16 10:36
昨天在做一个JavaScript练习的时候,我要将一段文字插入到div里,在这个过程中偶然接触到了一个以前不知道的属性——“fit-content”
在实践中也许会遇到这么一种情况,我们给一个固定宽度的div里面输入一厂串连续的英文字母,如果输入的足够多,文字会溢出来,就像这样:
只有当输入的是英文的时候才会出现这种情况,因为一长串的英文字母会被默认为是一个单词,而汉字则不会有这个问题。
一般情况下解决这类问题我会添加换行断点的属性,比如:word-wrap或者word-break。
而fit-content属性可以把内容包裹起来
设置:width:-moz-fit-content;(我用的火狐浏览器)
效果:
不管你写多长多没关系。
fit-content属性的用处还不止于此,它还可以配合margin:auto;用来设置元素居中:
但fit-content也有一个小问题:如果一个元素的width已经设置过,再设置width:fit-content;会冲突。最终div的宽度以div内子元素的宽为准,换句话说也就是“向内自适应”。比如咱们创建一个div,在这个div里面放一个100*100的图片,给div的宽度设置为width:200px; 然后再写width:fit-content;虽然还是会居中,但实际这个div的宽还是100。
还有一个问题就是目前这个属性的兼容性不是特别的好,用的时候要加上前缀。
除了fit-content以外,还知道了max-content,mini-content,fill-avaliable属性,还有Intrinsic Sizing(内部尺寸)和Extrinsic Sizing(外部尺寸)特性。这些纳入今后的学习目标,等多做些了解再来总结。
- CSS3 width:fit-content属性
- CSS3属性:width:fit-content 水平居中
- 理解CSS3 max/min-content及fit-content等width值
- CSS3 box-sizing(content-box:width指内容 border-box:width指border+padding+content)
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">用处
- CSS3的content属性详解
- css3 attr和content 属性
- CSS3的content属性详解
- CSS3的content属性详解
- CSS3的content属性详解
- CSS3中width属性的calc()使用
- CSS3中width属性的calc()使用
- CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
- CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
- CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
- 半深入理解CSS3 object-position/object-fit属性
- [DIV/CSS] CSS3的content属性详解
- [DIV/CSS] CSS3的content属性详解
- 怎么高效学习
- [DP-LIS] POJ 2533
- 给定一棵二叉树,找到它的最小深度。最小深度是从根节点到最近叶节点的最短路径上的节点数量
- nexus安装
- 数据结构->单链表的操作
- CSS3 width:fit-content属性
- HTML笔记3
- 从一道题看为什么你的工作年限不值钱
- CUDA动态并行
- python web py入门-1-web.py简介和安装
- csdn 登录经常卡住无法登录
- 接口测试基础-HTTP协议
- 数据结构->双链表的操作
- 敏捷开发中高质量 Java 代码开发实践