使用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>

7 个解决方案

#1

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

你应该设置固定的高度和宽度,并在CSS中使用溢出。

Example:

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

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

检查这个JsFiddle:https://jsfiddle.net/g8mv9eq4/

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

更新#1:https://jsfiddle.net/g8mv9eq4/1/

#2

Add this class to your comment div :

将此类添加到您的评论div:

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

#3

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

#4

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:

#5

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.

设置背景大小:100%自动;将使图像在x轴上尽可能地缩放。然后将图像缩放,使文本始终在图像边框内。

.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>

#6

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>

#7

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>