Text climbs out of block height

Question

There are three blocks. Because of the different height of the content, the blocks have different lengths. With JS, I calculate the height of the largest of the blocks and assign it to all the blocks. But the problem arises: when zooming in the text of the title crawls into my paragraph

. How to fix it, I do not know. Please help. In the title block I played with the properties of overflow and overflow-x , it did not help (or rather it helped, but I need it without a scroll). Here is my code: (On JSFiddle: http://jsfiddle.net/rxjc165v/ )

Container with blocks on the page:

<div id="content"> <div class="container"> <article id="first"> <h2> ЗАГОЛОВОК 1-ПЕРВОГО БЛОКА <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ЗАГОЛОВКА ПЕРВОГО БЛОКА</span> </h2> <p> ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ <a href="#">ПОДРОБНЕЕ</a> </p> </article> <article id="second"> <h2> ЗАГОЛОВОК 2-ВОТОРОГО БЛОКА <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ВОТОРОГО ПЕРВОГО БЛОКА</span> </h2> <p> ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ <a href="#">ПОДРОБНЕЕ</a> </p> </article> <article id="third"> <h2> ЗАГОЛОВОК 3-ТРЕТЬЕГО БЛОКА <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ТРЕТЬЕГО ПЕРВОГО БЛОКА</span> </h2> <p> ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ <a href="#">ПОДРОБНЕЕ</a> </p> </article> </div> </div>

CSS styles:

  h1 { background-color: #d9d9d9; font-size: 1.3em; padding: 1em; margin-bottom: 1.5em; text-align: center; } article { float: left; width: 30%; margin-right: 5%; color: #ffffff; } article:last-child { margin: none; margin-right: 0; margin-bottom: 2em; } article h2 { padding: 0 0 2% 0; text-align: center; background-color: orange; color: #000000; } article h2 span { display: block; font-size: 0.8em; } article p { background-color: #1f1f1f; text-align: center; padding: 2em 2.5em 2em 2.5em; font-size: 0.8em; } article pa { text-decoration: none; display: block; text-align: right; padding: 0.5em 0.5em 0 0.5em; color: #ffffff; } article pa:hover { color: #db9a28; }

My script:

 function setHeight() { var headerHeight1 = $('#first h2').height(); var headerHeight2 = $('#second h2').height(); var headerHeight3 = $('#third h2').height(); var maxHeaderHeight = headerHeight1; if (maxHeaderHeight <= headerHeight2) { maxHeaderHeight = headerHeight2; if (maxHeaderHeight <= headerHeight3) maxHeaderHeight = headerHeight3; } $('#first h2').css({ height: maxHeaderHeight + 'px' }); $('#second h2').css({ height: maxHeaderHeight + 'px' }); $('#third h2').css({ height: maxHeaderHeight + 'px' }); // for <p> tag var pHeight1 = $('#first p').height(); var pHeight2 = $('#second p').height(); var pHeight3 = $('#third p').height(); var maxPHeight = pHeight1; if (maxPHeight <= pHeight2) { maxPHeight = pHeight2; if (maxPHeight <= pHeight3) maxPHeight = pHeight3; } $('#first p').css({ height: maxPHeight + 'px' }); $('#second p').css({ height: maxPHeight + 'px' }); $('#third p').css({ height: maxPHeight + 'px' }); } setHeight(); $(window).resize(setHeight);

Here is a more recent version: jsfiddle.net/rxjc165v/10 The problem is that when you increase the scale, the header text climbs out of the block, although in theory the block height always adjusts to the height of the content.

Accepted Answer · 2015-05-08T18:26:55

You give the blocks a fixed height. When you change the scale, the width of the window changes, the text is redistributed in rows, and the fixed height does not change. Therefore, the text does not fit in the block.

If you want to make it exactly a script, then you need to subscribe to the resizing of the window, remove the specified heights and re-select the maximum.

But in general, it would be better to implement everything using css.

my js code works like this every time the window changes. I use $ (window) .resize ()

Yes, but then you take the height of the elements, and there at the previous start of the function fixed values are written - you read them (they are all equal) and assign them again.

I repeat, before reading it is necessary to reset these values by setting auto .

By the way, it will be more effective to first install 3 times, then read 3 times, then install 3 times again. And yes, it’s not good to look for the same dom elements every time.

Please look at my js-code, and so it works every time the window changes.
@Geronimo, I added the answer, but in general, the necessary phrases were already there.

Text climbs out of block height

1 answer 1

More articles: