How to make a 'text box' responsive to different lengths of texts

Asked Jan 19 '21 at 10:21

Active Jan 19 '21 at 10:24

Viewed 120 times

As you can see in the snippet below, I have some text in the <p> element, now let's say the <p> text changes (in the front-end) to something different like 'The night is dark, cold, chilly' for example with different width, how can I get the box to be responsive? So keeping the same padding all around the text? I've right now placed it there using margin-left: 55%;

.full {
width: 500px;
height: 400px;
background-color: grey;
}

p {
  text-transform: uppercase;
  text-align: right;
  background-color: green;
  color: white;
  margin-left: 55%; /* THIS HAS TO edited out? */
  padding: 15px;
}

<div class="full">
  <p>The woods are green</p>

</div>

asked Jan 19 '21 at 10:21

Zanic L3

1,028
1
16
28

1

margin:auto perhaps? – mplungjan Jan 19 '21 at 10:23
float:right, the easiest one – Temani Afif Jan 19 '21 at 10:23
1

`display: table;` and `margin-left: auto;` in `p` – s.kuznetsov Jan 19 '21 at 10:28
@s.kuznetsov Thank you! I did that and then the table was centered, addded margin-right: 0; and now it stays to the right bottom and it keeps the padding when different text is inside. Thank you :) – Zanic L3 Jan 19 '21 at 10:35
@Panic, no problem. – s.kuznetsov Jan 19 '21 at 10:36

How to make a 'text box' responsive to different lengths of texts

0 Answers0