调整div内容宽度以在多行上显示内容

Question

我有一个div标签<div id="pageNo"></div>用于显示分页编号。好吧，它从页面左端到右端显示数字1,2,3,4，... 25（它是动态的，并不总是25）。我希望数字切换到表格宽度结束的下一行。表格是显示这些数字的表格，宽度为1100px。我这样做了：<div id="pageNo" style="width: 700px"></div>。它没有用。所以我都在寻找实现这一目标的css。例如，它应该在显示10个数字后切换到新行

Answer 1

如果父容器具有固定宽度，并且您想要控制每行显示的数量，则可以使用div包装数字并设置固定宽度：

＆＃13;

＆＃13;

.parent {
  background-color: grey;
  width: 500px;
}

.parent div {
  background-color: white;
  margin: 1px;
  width: 50px;
  display: inline-block;
}

＆＃13;

<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试设置word-wrap

这样的事情：

<div id="pageNo" style="width: 700px; word-wrap: break-word;">
1 2 3 4......
</div>

看看这个小提琴：https://jsfiddle.net/9Ln3h3L2/1/