开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 解决字母或数字溢出盒子(文字超出时不自动换行)
+关注继续查看

代码如下:


<!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>


效果如下:


image

image


探究


原因:


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


解决


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


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


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MongoDB副本集、分片集的伪分布式部署(保姆级教程)(二)
MongoDB副本集、分片集的伪分布式部署(保姆级教程)(二)
35 0
686. 重复叠加字符串匹配 :「卡常」&「上下界性质」&「KMP」&「字符串哈希」
686. 重复叠加字符串匹配 :「卡常」&「上下界性质」&「KMP」&「字符串哈希」
28 0
方案 | 助旅业“抗疫”,阿里1+8文旅数字经济体推出智慧景区敏捷型方案
阿里1+8经济体针对疫情期和疫后期做定制调整,推出了文旅行业解决方案——智慧景区敏捷型方案
1320 0
第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示"..."
起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个“有点追求的”前端,我得想招试试总结下来,唯一的突破点就是echarts的配置了。
1497 0
文字跟随鼠标移动的效果
doctype html> Jquery body{height:3000px; background:#09F;} .wenzi{position:absolute; left:0; top:0;} p{cursor:pointer;} $(function(){ $(document).
857 0
免费的 Photoshop Apple Watch 原型设计素材
  大量的扁平化的苹果设备原型展示了响应式的 Web 设计。这是一组免费的 Photoshop Apple Watch 原型 PSD 设计素材,文件包括 iPhone、iPad、 iMac 和 Macbook 等。
793 0
x3d
从几篇文字得到关于web app开发的性能问题的答案
1. http://blogs.adobe.com/creativecloud/are-mobile-web-apps-slow/ 2. http://software.intel.com/zh-cn/articles/phonegap-html5 (翻译:http://www.
637 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载