如何让表情图片在div内自动换行以避免溢出？

架构老林

2026-5-13

Fixing Emoji Overflow & Enabling Automatic Wrapping

Hey there! Let's get those emojis wrapping properly instead of overflowing your container. I took a look at your code, and there are a couple of key issues causing the overflow:

The .font-border container has white-space: nowrap set, which forces all child elements to stay on a single line no matter what.
The .a8I container uses conflicting display properties (inline-block + table-cell) that prevent proper wrapping behavior.
The emoji buttons aren't set up to flow naturally within their parent container.

Here's the fixed code that will make your emojis wrap automatically when they hit the container's width:

Updated CSS

.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: none;
  margin-left: 16px;
  margin-bottom: 12px;
  position: relative;
  padding: 8px 2px;
  /* Removed white-space: nowrap to allow wrapping */
  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: auto; /* Changed to auto so scroll only appears when needed */
  display: flex; /* Use flexbox for easy wrapping */
  flex-wrap: wrap; /* Enable wrapping of child elements */
  width: 100%;
  height: 84%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  gap: 4px; /* Add small gap between emojis for better spacing */
  padding: 4px;
}

.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;
  cursor: pointer; /* Add cursor pointer for better UX */
}

Updated HTML

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

Key Changes Explained:

Removed white-space: nowrap from .font-border to allow content to wrap.
Changed .a8I to use display: flex and flex-wrap: wrap—this is the easiest way to make child elements wrap automatically when they exceed the container width.
Added gap to .a8I for better spacing between emojis.
Changed overflow-y: scroll to overflow-y: auto so the scrollbar only appears when content actually overflows vertically.
Added cursor: pointer to .a8r to improve user experience.

Now your emojis will wrap neatly within the container, and if there are too many to fit vertically, a scrollbar will appear automatically.

内容的提问来源于stack exchange，提问作者Robert Jones

如何让表情图片在div内自动换行以避免溢出？

Updated CSS #

Updated HTML #

Key Changes Explained: #

Updated CSS

Updated HTML

Key Changes Explained: