Question

我正在尝试用幻灯片制作图片标题。我已经完成了所有工作，但幻灯片中的文字没有包裹在幻灯片框中。有人请帮忙。使用JSfiddle链接查看代码：

HTML

</head>

<body>

<div id="mainwrapper">
    <!-- Image Caption 1 -->
    <div id="box-1" class="box">
        <img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
        <span class="caption simple-caption">
            <div class="blogp">
                <a href="">Simple Caption</a>
                <p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
            </div>
        </span>
    </div>

</body>
</html>

CSS

#mainwrapper {
    /*font: 18pt normal Arial, sans-serif;*/
    height: auto;
    /*margin: 5px 10px ;*/
    /*text-align: center;*/
    width: 300px;
    overflow: visible;
}

/* Image Box Style */
#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 182px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 300px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;

}
#mainwrapper .box img {
    position: absolute;
    left: 0;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
    cursor: text;

}

/* Caption Common Style */
#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    color: #fff;
    z-index: 100;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out; 
        transition: all 300ms ease-out;
    left: 0;


}


/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
    height: 150px;
    width: 300px;
    display: block;
    bottom: -70px;
    cursor: text;   /*line-height: 100pt;*/
    text-align: left;


}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-40%);
    opacity: 1;
    transform: translateY(-40%);

}

.blogp{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    color: #FF8000;
    padding: 3px 5px 3px 5px;
    text-decoration: none;
    width:100%;
}
.blogp a{
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 14pt;
    color: #0080C0;
    padding: 3px 5px 3px 5px;
    text-decoration: none;
    width:400px;
}

查看我在html中使用过的数字。我输入1-50但它只显示到23，文本没有被包裹到下一行。

Answer 1

只需添加到您的CSS：

.blogp p{

    word-wrap: break-word;
}

更新您的：JSFiddle

文本没有被包装在盒子里

1 个答案: