bootstrap缩略图的文字溢出

今天在搭前端的时候，用到bootstrap框架，但是遇到一个问题:
使用缩略图的时候，里面的文字都溢出来了。

展示

代码如下：

<div class="col-md-4 col-sm-6 item">
    <div class="thumbnail">
        ![](img/001.jpg)
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
            <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
        </div>
    </div>
</div>

找了很久不知道怎么办。然后找了一个同样是瀑布流的网站F12看了一下别人的代码。发现别人caption里面是span而不是p。然后我改了一下。
代码如下：

<div class="col-md-4 col-sm-6 item">
    <div class="thumbnail">
        <img src="" alt="" >
        <div class="caption">
            <h3>Thumbnail label</h3>
            <span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
            
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
            </span>`
        </div>
    </div>
</div>

p改为span之后.png

改完后明显把溢出部分装进去了。
可能是p标签换行之类某些属性引起的？？不太清楚。
记录，留待探究。