内容超出div宽度后自动换行的css代码

最新推荐文章于 2024-06-20 11:39:59 发布

左手喵子

最新推荐文章于 2024-06-20 11:39:59 发布

阅读量307

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136094823

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细解释了CSS中的word-wrap和word-break属性，如何处理长单词换行和URL地址，以及如何使用overflow属性隐藏溢出内容，通过实例展示了这两个属性在容器样式设置中的实际效果。

摘要由CSDN通过智能技术生成

使用一段css代码：”word-wrap: break-word;word-break: break-all;overflow: hidden;“。

实例演示如下：

1、设计两个容器，放入一些文字，代码如下：

	<body>
		<div class="cool1">dadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsd</div>
		
		<div class="cool2">dadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsdgdagsagsgsdgsgfdhfghfghfgjghjghytuitjytityityjgdadadadadfdaffgsd</div>
	</body>

2、修改两个容器的样式，给第一个容器加上了关键代码如下：

	<style>
			.cool1{
				width: 100px;background: red;word-wrap: break-word;word-break: break-all;overflow: hidden;
			}
			.cool2{
				width: 100px;background: green;
			}
		</style>