php - 如何通过移动到新行来防止图像溢出 div block ？

Question

我正在编写代码以使用按钮设置表情符号列表。我对表情符号图像有问题，因为当我控制 div block 的宽度大小时它们溢出了 div block 以防止图像溢出，所以它不起作用。

这是图片:

Here是 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 block 上方，以便图像显示在新行中以防止溢出。我不知道该怎么做，因为我尝试了几种不同的方法，所以你能给我举个例子吗，我如何将图像移动到一个新行以防止 div block 溢出？

谢谢。

Answer 1

您需要为此应用 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;

}

希望对你有帮助:)