php - 如何通过移动到新行来防止图像溢出 div 块?
问题描述
我正在编写代码以使用按钮设置表情符号列表。我遇到了表情符号图像的问题,因为当我控制 div 块的宽度大小以防止图像溢出时,它们溢出了 div 块,因此它不起作用。
这是图像:
这是 JSFiddle 链接。
我已经尝试过这个:
overflow:hidden;
我也试过这个:
width: 100%;
height: 100%;
overflow-y: scroll;
这是完整的代码:
.font-border {
-webkit-align-items: center;
align-items: center;
background-color: #ffff;
border: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
/*display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;*/
display: none;
margin-left: 16px;
margin-bottom: 12px;
position: relative;
padding: 8px 2px;
white-space: nowrap;
height: 21px;
}
.search_emoticons {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -799px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
background-color: rgba(0, 0, 0, .3);
opacity: 1;
}
.show_face_emoticons {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -270px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
opacity: .225;
}
.show_object_emoticons {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -689px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
opacity: .225;
}
.show_nature_emoticons {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -547px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
opacity: .225;
}
.show_transportation {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -657px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
opacity: .225;
}
.show_symbol_emoticons {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -854px;
width: 28px;
height: 30px;
margin: 2px 3px;
border: 0;
opacity: .225;
}
.close_border {
border: none;
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -767px;
height: 30px;
width: 30px;
float: right;
}
.emoticons_input_search {
border-style: none none solid;
border-bottom: 2px solid #c3c3c3;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: .875rem;
width: 100%;
padding: 8px;
outline: none;
}
.a8I {
position: relative;
overflow-y: scroll;
display: inline-block;
display: table-cell;
width: 100%;
height: 84%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.a8m {
padding: 2px;
text-align: center;
vertical-align: middle;
margin: 4px;
cursor: pointer;
background: transparent;
border: none;
font-size: 1px;
}
.e1f600 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
}
.e1f601 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f602 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f603 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f604 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f605 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f606 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f607 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f608 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f609 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.e1f610 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
}
.a8r {
margin: 0 .2ex;
vertical-align: middle;
height: 28px;
width: 28px;
display: inline-block;
}
<div id="emoticons-menu" class="font-border" style="visibility: visible; left: 212px; top: 219px; box-sizing: border-box; position: absolute; width: 262px; height: 212px; z-index: 2; display: block;">
<div id="show_emoticons" class="a8I a8m" style="position: relative; width: 100%; height: 100%; overflow-y: scroll;">
<button aria-label="grinning face" string="1f601" class="e1f601 a8r"></button>
<button aria-label="grinning face" string="1f602" class="e1f602 a8r"></button>
<button aria-label="grinning face" string="1f603" class="e1f603 a8r"></button>
<button aria-label="grinning face" string="1f604" class="e1f604 a8r"></button>
<button aria-label="grinning face" string="1f605" class="e1f605 a8r"></button>
<button aria-label="grinning face" string="1f606" class="e1f606 a8r"></button>
<button aria-label="grinning face" string="1f607" class="e1f607 a8r"></button>
<button aria-label="grinning face" string="1f608" class="e1f608 a8r"></button>
<button aria-label="grinning face" string="1f609" class="e1f609 a8r"></button>
<button aria-label="grinning face" string="1f610" class="e1f610 a8r"></button>
<button aria-label="grinning face" string="1f600" class="e1f600 a8r"></button>
</div>
</div>
我期望实现的是我想将图像移动到每次它越过 div 块的位置,以便图像显示在新行中以防止溢出。我不知道该怎么做,因为我尝试了几种不同的方法,所以请你给我看一个例子,我如何将图像移动到新行以防止 div 块溢出?
谢谢你。
解决方案
您需要申请word-wrap
并white-space
为此如下:
.a8m {
padding: 2px;
text-align: center;
vertical-align: middle;
margin: 4px;
cursor: pointer;
background: transparent;
border: none;
font-size: 1px;
word-wrap: break-word;
white-space: initial;
}
希望它可以帮助你:)
推荐阅读
- mongodb-query - MongoDB 使用 MongoC 驱动程序查找文档
- azure - CosmosDB:TransportException - 发生客户端传输错误
- javascript - 如何使用 contextualIdentities.create() 设置自定义 cookieStoreId?
- php - Laravel, infinite loading when I try to display MySQL tables
- android - 如何使 tablayout 片段适合 INSIDE viewpager
- mongodb - 如何使用 golang mongo-driver 在 mongoDB 中创建复合索引?
- csv - Dataweave 无法将 csv 转换为文本/纯文本
- vue.js - vuejs css 过渡不适用于移动 chrome
- typescript - 找不到已安装库的命名空间
- java - Java CIpher 列转置