css对字体的数字和字母不换行，给对应容器加入：

最新推荐文章于 2024-08-15 18:19:19 发布

lyy2665624982

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量418

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_56276571/article/details/136191543

版权

没有加入前的效果图：

想要这个字母和数字换行并且正确显示如下操作：

html代码：

<div class="text-box">
			kshfksdjflskjfkls.kf;lsdkf;sldkfs;ldkfs;ldkf;sldkf;ldks;lfks;kfdlfgjlkdjfdskj
		</div>

css代码：

/* 字体的数字和字母不换行，给对应容器加入： */
			.text-box{
				width: 200px;
				border: 1px solid red;
				word-break:break-all;
				/*防止数字字母溢出*/
				text-align: justify;
				/*防止文字参差不齐*/
				padding: 0.2rem;
			}

处理过后的效果图：