Question 198808 in CSS Question posted in
Some basic documentation can be found here.

How to prevent text from flowing outside its parent box in css?

The text isnt shrinking to fit the div box, it is overflowing instead
Expecting the text to shrink to fit the div box

div {
  display: inline-block;
  width: 60px;
  height: 12px;
}

p {
  display: inline-block;
  width: auto;
  height: auto;
  text-align: center;
}
<div>
  <p>Reading List</p>
</div>
Tags:

2

Answers


  1. 0 
    .parent-box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden; /* or scroll, auto */
}
    <div class="parent-box">
  <p>This is some text that should not flow outside the box.</p>
</div>
    Login or Signup to reply.
  2. 0

    Deny wrapping (white-space: nowrap;) for p tag

    Change height for div. because 12px is too little

    Add overflow: hidden; for div

    Optional. Change padding and margin

    div {
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  padding: 0;
}

p {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  text-align: center;
  margin: 0;
}
    <div>
  <p>Reading List</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search