display text within a box using css

Question

I have an image that is set inside a container as a background image, over it i am trying to place a box in which i am supposed to write text, however my problem is that if the text is too long then it increases the height of the box and it displays out of the background image. I want the box and the text within it to be always within the image area no matter how long the text is and the whole text should be visible (i.e the image should adjust itself in a way that the box and its text should always be inside it and would be great if it is responsive also)

.container2 {
  margin-left: 1%;
  margin-right: 1%;
  height: auto;
  max-width: 100%;
}
.newtestiimg2 {
  background-image: url("../testimonial/page.jpg");
  background-repeat: repeat-x;
  height: 650px;
  width: 100%;
  color: rgb(255, 255, 255);
}
.comment01 {
  position: absolute;
  padding: 20px;
  margin-left: 25%;
  width: 50%;
  height: auto;
  margin-top: -600px;
  color: #FFF;
  background-color: #000;
  margin-right: 25%;
}

<div class="container2">
  <div class="newtestiimg2"></div>
  <div class="comment01">
    <div class="service-wrapper01"> What is fosho ? </div>
    <p>&nbsp;</p>
    <p>lorem ipsum lorem ipsum .... long text continues</p>
  </div>
</div>

Answer 1

Add Padding in background container instead of adding margin to caption. Like below example

.wrapper{
  width:100%; margin:0; padding:0px; display:block;
}
.image-container{
  width:100%;
  background:url(https://lh4.googleusercontent.com/-ucSnMnlAKMY/VRD5Lk0e7II/AAAAAAAAAmQ/wUxuXmE00g4/w640-h480-no/Funny%2BAngry%2BBirds_38.jpg) center top no-repeat #d1d1d1 fixed;
  background-size:cover;
  padding:20px 0;
  height:100%
}
.image-caption{
  width:250px;
  background:rgba(0, 0, 0, 0.8);
  padding:20px;
  font-size:13px;
  color:#ffffff;
  font-family:arial;
}

<div class="wrapper">
  <div class="image-container">
      <div class="image-caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  </div>
</div>

Answer 2

You should set fixed height and width and use overflow in CSS.

Example:

div {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

Check this JsFiddle: https://jsfiddle.net/g8mv9eq4/

UPDATE #1: https://jsfiddle.net/g8mv9eq4/1/

Answer 3

Try this, I hope it will be helpful as per your requirement

.wrapper{
  width:100%; margin:0; padding:0px; display:block;
}
.image-container{
  width:100%;
  background:url(https://lh4.googleusercontent.com/-ucSnMnlAKMY/VRD5Lk0e7II/AAAAAAAAAmQ/wUxuXmE00g4/w640-h480-no/Funny%2BAngry%2BBirds_38.jpg) center top no-repeat #d1d1d1 fixed;
  background-size:cover;
  height:100%
}
.image-caption{
  width:250px;
  background:rgba(0, 0, 0, 0.8);
  padding:20px;
  font-size:13px;
  color:#ffffff;
  font-family:arial;
}

<div class="wrapper">
  <div class="image-container">
      <div class="image-caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  </div>
</div>

Answer 4

Setting background-size: 100% auto; will cause the image to scale as far as it can in the x-axis. and then will make the image scale so the text is always within the image borders.

.kitten {
  background: url(http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif) no-repeat;
  width: 80vw;
  background-size: 100% auto;
  background-position: center;
  background-color: pink;
}
.kitten span {
  color: white;
}

<div class="kitten">
  <span>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </span>
</div>

Answer 5

HTML:

.box{
  padding:50px;
  border:1px solid #aaa;
  width:300px;
 
  text-align:center;
 
}

<div class="box">
<p>This is my text in the box</p>
</div>

CSS:

Answer 6

I guess you want to use a vertical scroll:

CSS:

.comment01 {
    position: absolute;
    padding: 20px;
    margin-left: 25%;
    width: 50%;
    /*height: auto;*/ /* Deleted this */
    margin-top: -600px;
    color: #FFF;
    background-color: #000;
    margin-right: 25%;  
    height: 102px; /* Added this */
    overflow: auto; /* Added this */
}

Example demo

Answer 7

Add this class to your comment div :

.wrap-text {
    overflow: visible;
    white-space: normal;
}