CODEWITHSUNDEEP
javascriptjquerycssjsp
Coder17
Coder17

Reputation: 873

adjusting div content width to display content on multiple lines

enter image description herei 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

Upvotes: 0

Views: 135

Answers (2)

Eduardo Castro
Eduardo Castro

Reputation: 48

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>

Upvotes: 1

Brian
Brian

Reputation: 76

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/

Upvotes: 0

Related Questions