背景
通常情况下，如果父元素的内容是行内元素或者行内块元素，或者是文字的话，当内容过长时，超出父盒子的宽度之后，会默认换行。那么如何让内容不换行（宽度由内容撑开）呢？可参考下列做法
做法
通过white-space: nowrap;实现
.content { width: 100%; overflow-x: scroll; white-space: nowrap; /* 内容超出不换行 */}
css如何让元素的内容不换行，宽度由内容撑开
2022-11-14
388
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
css如何让元素的内容不换行，宽度由内容撑开
目录
相关文章
|
2月前
|
前端开发
JavaScript
|
2天前
|
前端开发
开发者
【专栏：CSS基础篇】CSS选择器详解：精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性，详细阐述了基础选择器（元素、类、ID、属性和伪类/伪元素）及复杂选择器（后代、子元素、相邻兄弟和一般兄弟）的用法。通过理解并巧妙运用这些选择器，开发者能更高效地控制页面样式，提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能，助力创建优雅且强大的样式表，实现精准的网页设计。
6
0
0
|
3天前
|
前端开发
容器
|
9天前
|
前端开发
|
12天前
|
XML
前端开发
数据格式
|
15天前
|
前端开发
|
26天前
|
前端开发
|
28天前
|
前端开发
容器
|
2月前
|
前端开发
容器
|
2月前
|
前端开发
UED
容器
热门文章
最新文章
1
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
2
《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
3
《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
4
前端代码整洁与规范之CSS篇
5
《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
6
Tailwind CSS如何在vue项目中使用
7
【前端设计】HTML+CSS+JavaScript基本特性
8
【掰开揉碎】详解 CSS3 Grid 布局
9
解密CSS单位：px、em、vh的区别与应用
10
CSS 中BFC是什么？