adjusting div content width to display content on multiple lines

Question

i have a div tag <div id="pageNo"></div> for displaying the pagination numbers. well it's displaying the numbers 1,2,3,4,..25(it's dynamic, not always 25) in one line from left end of the page to right end. I want the numbers to switch to next line where the table's width ends. the table is the one under which these numbers are displayed and it has the width of 1100px. I did something like this : <div id="pageNo" style="width: 700px"></div> . And it did not work. So all am looking for the the css to achieve that. For example, it should switch to new line after displaying 10 numbers

Answer 1

If the parent container has a fixed width and you want to control how many numbers are displayed per line, you can wrap the numbers with divs and set a fixed width:

 .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

You could try and set word-wrap

Something like this:

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

Check out this fiddle: https://jsfiddle.net/9Ln3h3L2/1/