解决字母或数字溢出盒子(文字超出时不自动换行)

简介: 解决字母或数字溢出盒子(文字超出时不自动换行)

代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>溢出问题解决</title>
  <style>
    div {
      height: 200px;
      width:200px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div>1111111111111111111111111111111111</div>
</body>
</html>


效果如下:



探究


原因:


我没查到哈,我自己觉得内部编码时候是吧连在一起的数字或者字母当成一个整体了,单个整体显示时候按照行元素展示的不会换行(纯属猜测,希望有大佬见到评论指正)


解决


CSS样式中加上下面任一一句即可。


word-break:break-all;
    或者
word-wrap:break-word;


w3cschool:https://www.w3school.com.cn/cssref/pr_word-break.asp

相关文章
|
6月前
|
编解码
通过计算的文本宽度,由于小数四舍五入引起的文字显示不全问题
通过计算的文本宽度,由于小数四舍五入引起的文字显示不全问题
36 0
|
JavaScript 前端开发
文本溢出【单行和多行文本溢出】
文本溢出【单行和多行文本溢出】
|
6月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
前端开发
文字不换行超出后左右滑动
文字不换行超出后左右滑动
58 0
多行文本溢出显示省略号
多行文本溢出显示省略号
64 0
|
前端开发 JavaScript API
固定元素宽度根据文本的长度缩小字号,超出缩小字号
固定元素宽度根据文本的长度缩小字号,超出缩小字号
428 0
固定元素宽度根据文本的长度缩小字号,超出缩小字号
|
前端开发 程序员
小细节:盒模型里面连续输入英文和数字不会自动换行,汉字会自动换行
小细节:盒模型里面连续输入英文和数字不会自动换行,汉字会自动换行
98 0
|
JavaScript 前端开发
文本溢出显示省略号
文本溢出显示省略号
文本溢出显示省略号
CSS中溢出的文字省略号显示(单行和多行溢出)
CSS中溢出的文字省略号显示(单行和多行溢出)
CSS中溢出的文字省略号显示(单行和多行溢出)
|
前端开发
多行文本溢出显示省略号(…) +css样式
多行文本溢出显示省略号(…) +css样式
151 0
多行文本溢出显示省略号(…) +css样式