使用Bootstrap在HTML页面上的一行中限制文本

Question

图像下方有一个图像和标题，整个页面都有相同的东西，下面有4个图像和标题，但当标题中的文字进入下一行时，整个设计都会破坏。看看屏幕短裤。

一行中的标题如下所示

 Headline in two line looks like this

CSS

<div class="row">
                <!--Start OF Live Feeds-->
                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>
                    </div>
                </div>
              </div>

@Ibrahim Alsurkhi

如何实现您的意思

    <style type="text/css">

    .work-item{
    min-height:250px;
    }
</style>

然后在div标签类

<div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

两行代码

 <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsTwo" runat="server" onserverclick="LiveFeedsTwoEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsTwo" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsTwo" runat="server" Text="Live Feeds Two: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsThree" runat="server" onserverclick="LiveFeedsThreeEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsThree" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsThree" runat="server" Text="Live Feeds Three: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFour" runat="server" onserverclick="LiveFeedsFourEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFour" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFour" runat="server" Text="Live Feeds Four: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFive" runat="server" onserverclick="LiveFeedsFiveEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFive" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFive" runat="server" Text="Live Feeds Five: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSix" runat="server" onserverclick="LiveFeedsSixEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSix" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSix" runat="server" Text="Live Feeds Six: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSeven" runat="server" onserverclick="LiveFeedsSevenEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSeven" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSeven" runat="server" Text="Live Feeds Seven: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsEight" runat="server" onserverclick="LiveFeedsEightEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsEight" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsEight" runat="server" Text="Live Feeds Eight: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>