使用css在框中显示文本

时间：2015-05-13 06:22:06

标签： html css html5 css3

我有一个在容器内设置的图像作为背景图像，在它上面我试图放置一个我应该写文本的框，但是我的问题是如果文本太长则会增加框的高度，它显示在背景图像之外。 我希望盒子及其中的文本总是在图像区域内，无论文本有多长，整个文本应该是可见的（即图像应该以盒子及其文本应始终在里面的方式调整自己它会很好，如果它也是响应的话）

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：1)

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

示例：

public class Demo1{
@Test(groups={"smokeTest"})
public void test1() throws IOException {
DemoScreen.submit();
}*

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

更新＃1 ：https://jsfiddle.net/g8mv9eq4/1/

答案 1 :(得分：0)

将此课程添加到您的评论div：

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

答案 2 :(得分：0)

我想你想要使用垂直滚动：

<强> CSS： 

readTokens()

Example demo

答案 3 :(得分：0)

<强> HTML：

＆＃13;
＆＃13; 
.box{
  padding:50px;
  border:1px solid #aaa;
  width:300px;
 
  text-align:center;
 
}
＆＃13; 
<div class="box">
<p>This is my text in the box</p>
</div>
＆＃13;
＆＃13;
＆＃13;

<强> CSS：

答案 4 :(得分：0)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

试试这个，我希望根据您的要求提供帮助

＆＃13;
＆＃13; 
if(Days.daysBetween(fromDate,toDate ).getDays()>7)
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

在后台容器中添加填充，而不是在标题中添加边距。如下例

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题