css——width: fit-content 宽度、自适应

介绍

width: fit-content; 是一个 CSS 属性,用于设置元素的宽度。它的作用是让元素的宽度刚好包裹内容,而不会添加额外的空白空间。具体来说,fit-content 会根据内容的宽度自动调整元素的宽度,使其尽可能小,同时仍然能够完全显示内容。

假设有一个段落元素,其内容较多,希望宽度刚好包裹内容:

在这个示例中,段落的宽度会根据内容的长度自动调整,而不是填满其父容器的整个宽度。

html 复制代码
<p style="width: fit-content; border: 1px solid black;">
  这是一个示例段落。它的宽度会自动调整以包裹内容。
</p>
相关推荐
集成显卡几秒前
基于 Node.js 的 API 方式接入深度求索Deepseek、字节跳动豆包大模型
前端·人工智能·node.js
小野鲜4 分钟前
面试题·如何计算白屏时间
前端
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin5 分钟前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
加个鸡腿儿29 分钟前
一文说清:默认导出`export default` /命名导出 `export`
前端
SoaringHeart35 分钟前
SwiftUI研究:原生路由导航重构封装研究
前端·swiftui·swift
Jackson_Mseven39 分钟前
🥷 前端老六上线了:登录成功后,我到底是怎么“一直在线”的?
前端·后端·架构
程序视点1 小时前
已成绝版!8月5日即将下线!b站国际版
前端
遂心_1 小时前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
老神在在0011 小时前
SpringMVC2
java·前端·学习·spring·java-ee