I have a paragraph next to a heading. Both are display:inline-block but when the page is compressed through a resolution reduction then the entire paragraph falls to the next line. I have tried wordwrapping and overflow but they seem to have no affect. Is there something else I can use ? Code below does not reflect the wordwrapping or overflow.

.header_class_name {
  display: inline-block
}

.para_class_name {
  display: inline-block
}

<h4 >my title here</h4>
<p >paragraph here</p>

CodePudding user response：

You can use display: inline; inside of display: inline-block;.

.header_class_name {
    display: inline;
}

.para_class_name { 
    display: inline; 
    word-break: break-word; 
}

<h4 >my title here</h4>
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

CodePudding user response：

You can use min-width property, so when window shrinks, layout should stay firm.

CodePudding user response：

edit - adding a solution based on your comment

try using white-space: nowrap;, if that doesn't work, you can try setting the containing div size to a higher width.

you can try doing several things:

1. wrap both divs with <nobr>
2. make the parent div a flexbox with flex-direction: row; flex-wrap: nowrap; the problem with this solution is that they would 'leak' outside your viewport width, so I would consider allowing line break/making the font smaller/using elipsis