HTML make p tag always 2 lines

Question

I have a game that has a tutorial system. There is a div that contains a p and a continue button. The user will click the continue button multiple times to read new things, and then begin playing the game.

I want my p tag to always be 2 lines so that the button stays in the same place (the p sometimes is 1 line or 3 lines and so the button moves around, making the user have to move the mouse along instead of just clicking)

I also don't want to just position the button, because the extra space looks bad.

The outer div does not have width/height restrictions

example (outerDiv does not have set width or height):

    <div id="outerDiv"><p id="example">this text can vary in length, but still make this 2 lines</p><div>

First, there is no need to comment on your own question to reiterate that you need help just seconds after asking it. Second, please edit your question to include a [**Minimal, Complete, Verifiable Example**](https://stackoverflow.com/help/mcve). — Tyler Roper, Sep 10 '18 at 02:01
to make p 2 line high try set line-height 2 time the value for height — Chris Li, Sep 10 '18 at 02:03
@Chris Li im not completely sure what u mean but i did this: line-height: 50%; on the p, and it doesnt fix it — Joe C., Sep 10 '18 at 02:07
for example give p height: 50px and line-height: 25px, then p is always 2 lines high — Chris Li, Sep 10 '18 at 02:08
@JasonC. For future reference, it's certainly necessary. It's actually [#1 on the list of on-topic posting rules...](https://stackoverflow.com/help/on-topic). — Tyler Roper, Sep 10 '18 at 02:25
You need to increase div's width/ end the text when 3 or more lines are present and you need to decrease the width when 1 line is present. Refer https://stackoverflow.com/a/783936/7756345 this answer to read number of lines present and increase(or cut the text) or decrease parent div's width until it is converted in to 2 lines. — yogesh vaidya, Sep 10 '18 at 05:59

score 0 · Answer 1 · answered Sep 10 '18 at 02:25

considering that the line of content in p is variable and unpredictable, I prefer use a height-fixed container to show content and give it a scrollbar when the content is too long like this:

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  document.getElementById('example1').style.display = 'none';
  document.getElementById('example2').style.display = 'block';
});

.outerDiv {
  margin-bottom: 10px;
  padding: 15px;
  width: 400px;
  height: 200px;
  border: 1px solid;
  overflow-y: auto;
}
#example2 {
  display: none;
}
p {
  margin: 0;
}

<div class="outerDiv">
  <p id="example1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  <p id="example2">Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
</div>
<button>Next</button>

You can reduce the container height as what you need. – Chaska Sep 10 '18 at 05:35 — Chaska, Sep 10 '18 at 05:35

HTML make p tag always 2 lines

1 Answers1