user4532739
user4532739

Reputation:

display text within a box using css

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>

Upvotes: 1

Views: 761

Answers (7)

Shailesh
Shailesh

Reputation: 337

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>

Upvotes: 0

Jazi
Jazi

Reputation: 6752

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/

Upvotes: 1

Shailesh
Shailesh

Reputation: 337

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>

Upvotes: 0

Persijn
Persijn

Reputation: 15000

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>

Upvotes: 0

Suthakar
Suthakar

Reputation: 53

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:

Upvotes: 0

chimos
chimos

Reputation: 664

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

Upvotes: 0

Hardy
Hardy

Reputation: 542

Add this class to your comment div :

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

Upvotes: 0

Related Questions