調整div內容寬度以在多行上顯示內容

Question

我有一個div標簽<div id="pageNo"></div>用於顯示分頁號。 從頁面左端到右端的一行中顯示數字1,2,3,4，.. 25（它是動態的，並不總是25）。 我希望數字切換到表格寬度結束的下一行。 該表格是顯示這些數字的表格，其寬度為1100像素。 我做了這樣的事情： <div id="pageNo" style="width: 700px"></div> 。 而且它沒有用。 因此，所有人都在尋找實現這一目標的CSS。 例如，顯示10個數字后應切換到新行

Answer 1

如果父容器的寬度固定，並且您希望控制每行顯示多少個數字，則可以用div包裹數字並設置固定寬度：

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

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

Answer 2

您可以嘗試設置word-wrap

像這樣：

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

看看這個小提琴： https : //jsfiddle.net/9Ln3h3L2/1/