That is going to be tough to do in 1 css file because each song could have 1 line that pushes it out.
To be honest. This isn't bad/
Jumpin' jack flash is a gas, gas,
gas.
But it's all right now, in fact it's
a gas!
Because this is a common issue on the web people have become used to seeing a line break not always in the best place.
To me that doesn't look bad and I can still tell where a new line is meant to go.
If you want you could go manually override each width page by page but at 200 pages this will become tedious and as you add more pages you will see that it can become a nightmare to upkeep.
Come up with what the averge width would be... lets say 300 as an example.
Your css would like like this:
.center_div {
margin:0 auto;
text-align:left;
width:300px;
}
Then your div would look like this:
<div class="center_div">
Your text here
</div>
If you need a width other than 300px, lets say 400px, then in the div you override the CSS width definition by adding a width to the div itself.
So a div with an overriding width would look like this.
<div class="center_div" style="width:400px;>
Your text here
</div>
Browsers will override anything defined in CSS if there is a conflicting value defined right on the object itself.
So for any divs where 300px doesn't work you would have to add that overriding value on the div. It is a lot more work though.
I would be fine to just use an average width and if it wraps funny for some.. oh well, people won't be turned off by it, and shouldn't be confused either.
You could use percent but I think you would have the same result and would need to override it on some pages.
Percent would work like this.
Lets say the <div> is in another div that is set to 800px... using 40% would give you a width of 320px;, but if it is always going in a 800px container then 40% will always be 320px so you have the same problem as no matter if you use width:320px or width:40%
