I have an image with a fixed width and height background I want the text to have a fixed number of lines (3) . The text wraps in different browsers differently, sometimes an extra line is inserted, which goes beyond the background image's text. This means that I have to add / remove words from my text and to see that in every browser, the rendering must be constantly checked that it is in the same number.
I guess the browser width / margin / padding so that the width of the container is different, or that the text is provided slightly differently in each browser (with greater or lower width).
What will be the recommended practice for this? I want the container text to be longer than the 3 line, so I'm right to fix the container height
Recommended practice does nothing like try to redesign so that background image / fixed height is not required and the text does not need to be limited to three rows. If this is needed by any type of person you have installed by your master / customer, then you need to talk to them and explain, it is not something that can be done in HTML / CSS or not.
Keep in mind that not only will the width of the characters differ in each browser, which results in different wrapping, but the browser will also display line text in different heights, Your element may not be three lines.
If you do not have any other options, consider using overflow: hidden on an element of fixed size, although it will likely give the possibility to cut letters
I do not think the available space will be different between the browser. If you were using related units (
em ,
% ), then possibly there would be spherical differences of one pixel maximum. Although you are using pixels, which should be similar in all existing browsers (in standard mode).
Still, I'm not saying that you should restrict the amount of text that you want to show, just leave some text space for "breath" and do not give the element a fixed height in pixels . Instead:
- a
line-height (for example
1.25 ) and a
minimum-height three Set the amount of time (here
3.75em ).
Make your best guess to limit the text you want to use in three rows.
Add some javascript, which makes the text smaller, if it does, then three lines.
Adjust your layout (with a flexible background for that element), so it's less than the font size and of different browsers (and more importantly the user's favorite) In less case you can avoid an additional line of text, due to which you have not estimated text length and javascript.
Comments
Post a Comment