文字沒有被包裝在一個盒子裏

我想用幻燈片做一個圖像標題。我已經完成了所有工作，但幻燈片中的文本並未包裹在幻燈片框中。有人請幫助。使用的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，文本沒有被包裝到下一行。

來源

2014-10-01 Anbu

網址無法正常工作 – 2014-10-01 11:40:45

HTTP後加入的空間：// – Anbu 2014-10-01 11:52:10

@Anbu當心，你的HTML代碼是無效的（未閉合' div'標記，內聯元素內的塊元素（'span.caption'內的'div.blogp'））。你應該修復它們。另外，沒有必要在'JSFiddle'內部放置''，''和''標籤，它們會自動添加。編輯：鏈接已改變原來的帖子 – pomeh 2014-10-01 11:54:36

只需添加到你的CSS：

.blogp p{ 

    word-wrap: break-word; 
}

更新的：JSFiddle

來源

2014-10-01 11:39:57 user28470

謝謝:)其工作。非常感謝你 – Anbu 2014-10-01 11:41:58

文字沒有被包裝在一個盒子裏

回答

相關問題