Php 如何通过移动到新行来防止图像溢出div块？

我正在编写代码，使用按钮设置表情符号列表。我有一个问题的表情图像，因为他们是溢出的div块时，我控制的宽度大小的div块，以防止图像溢出，所以它没有工作

图为：

是JSFiddle链接

我已经试过了：

overflow:hidden;

width: 100%;
height: 100%; 
overflow-y: scroll;

我也试过：

overflow:hidden;

width: 100%;
height: 100%; 
overflow-y: scroll;

以下是完整的代码：

.font边框{
-webkit对齐项目：居中；
对齐项目：居中；
背景色：#ffff；
边界：无；
-webkit边界半径：2px；
边界半径：2px；
-webkit盒阴影：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）；
盒影：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）；
/*显示：-webkit内联框；
显示：-webkit内联flex；
显示：-ms内联flexbox*/
显示：无；
左边距：16像素；
边缘底部：12px；
位置：相对位置；
填充：8px 2px；
空白：nowrap；
高度：21px；
}
.search_表情符号{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-799px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
背景色：rgba（0,0,0,3）；
不透明度：1；
}
.显示面部表情{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-270px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
不透明度：.225；
}
.显示\u对象\u表情符号{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-689px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
不透明度：.225；
}
.显示自然表情{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-547px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
不透明度：.225；
}
.展示交通{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-657px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
不透明度：.225；
}
.显示\u符号\u表情符号{
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-854px；
宽度：28px；
高度：30px；
利润：2倍3倍；
边界：0；
不透明度：.225；
}
.关闭边境{
边界：无；
背景：无重复url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png)0-767px；
高度：30px；
宽度：30px；
浮动：对；
}
.表情符号\u输入\u搜索{
边框样式：无实体；
边框底部：2个实心#C3C3；
-webkit框大小：边框框；
框大小：边框框；
字体大小：.875rem；
宽度：100%；
填充：8px；
大纲：无；
}
.a8I{
位置：相对位置；
溢出y：滚动；
显示：内联块；
显示：表格单元格；
宽度：100%；
身高：84%；
左：0；
右：0；
底部：0；
排名：0；
}
.a8m{
填充：2px；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：4倍；
光标：指针；
背景：透明；
边界：无；
字号：1px；
}
.e1f600{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-11223px；
}
.e1f601{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f602{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f603{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f604{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f605{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f606{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f607{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f608{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f609{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.e1f610{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-14152px；
}
.a8r{
利润率：0.2ex；
垂直对齐：中间对齐；
高度：28px；
宽度：28px；
显示：内联块；
}

---

您需要为此应用

换行

和

空白

，如下所示：

.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;

}

---

希望它能帮助您：）

您需要为此应用

wordwrap

和

空白

，如下所示：

.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;

}

希望它能帮助你：）

试试这个：

表情符号的父div应显示为FLEX 例如：

显示：flex（这将水平排列表情符号）
flex-wrap:wrap（这将使表情符号在到达边缘时出现新行）
请尝试以下操作：

表情符号的父div应显示为FLEX
例如：

显示：flex（这将水平排列表情符号）
flex-wrap:wrap（这将使表情符号在到达边缘时出现新行）