老师想请问下什么叫行内元素的width属性会变自动收缩

rt

慕仙0240544 2022-06-06

源自：盒模型 2-10 行内元素和块级元素的相互转换

14

收起

1回答

imooc_慕慕回答被采纳获得+3积分 2022-06-06 18:31:59

同学你好，因为行内元素的宽高是随标签内容变化而变化，可以理解为自动收缩，祝学习愉快~

慕仙0240544 提问者 #1

老师我想请问下块级元素的宽高也随内容变化而变化呀
<style>
div{
height: 40px;
width: 20px;
background-color: green;
color: black;
}
</style>
</head>
<body>
<div>xiaowantongxueyidingkeyijindachangdexiaowantongxueyidingkeyijindachangdexiaowantongxueyidingkeyijindachangdexiaowantongxueyidingkeyijindachangde</div>
</body>
为啥它又是撑满的

2022-06-06 19:04:13
imooc_慕慕回复提问者慕仙0240544 #2

同学你好，这属于溢出问题，造成这样的结果原因是连续的英文字母或者数字会出现不自动换行的问题，可以使用css控制换行属性word-wrap:break-word;强制换行；参考如下图：

这是块元素的溢出问题，并不是自动收缩;祝学习愉快~

2022-06-07 09:24:40
慕仙0240544 提问者回复 imooc_慕慕 #3

老师我还是不太理解自动收缩是啥意思我觉得span和div一样也是撑满的呀
<style>
.one{
background-color: red;
}
</style>
</head>
<body>
<span class="one">xiaowantongxueyidingkeyijindachangsadfwefsfewf </span>
</body>
谢谢老师！

2022-06-07 09:55:47

点开查看后面1条评论

相似问题

元素浮动后的属性问题

老师，这里的width自动收缩时什么意思

父元素自适应宽度，子元素同行及自动换行的问题

老师想请问下浮动和行内块元素的区别是不能控制左右和浮动不是文档流吗

请问老师为什么

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15661 份
解答问题 17891 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

200 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载