CSS如何在不破坏<div> </div>中的新行的情况下继续文本

Question

我只是想知道我应该如何添加我的div样式以使文本继续“...”而不是像这样突破新行：

我的代码在下面，我希望这个样式与我的porfolio-info div：

<div class="portfolio-wrapper">
    <div class="portfolio-single">
        <div class="portfolio-thumb">
            <img src="image-link" alt="" height="300px">
        </div>
    </div>
    <div class="portfolio-info" style="border: 1px dotted gray; display: inline;">
        <h2>Text will be here</h2>
    </div>

谢谢

Answer 1

尝试以下

.portfolio-info{ text-overflow: ellipsis ellipsis; text-align: center; }

<强> Demo

Answer 2

您需要将.portfolio-info设置为display: block，并将white-space设置为no-wrap，并将文字保留在一行中。您不能在内联元素中使用h2等块级元素，因此我将其更改为span。然后，您可以设置固定或基于百分比的宽度，以使容器中的div保持指定的大小。然后，您只需将.portfolio-info设置为text-overflow: ellipsis，使溢出的文本以省略号字符结尾。

如果可能，请避免使用height和style等内联属性，而是使用纯CSS来保持标记和样式分开。

<div class="portfolio-wrapper">
    <div class="portfolio-single">
        <div class="portfolio-thumb">
            <img src="http://placekitten.com/300" alt="">
        </div>
    </div>
    <div class="portfolio-info">
        <span>Very long text that will likely overflow the container, making the text too long to fit into this square, meaning to goes to a new line</span>
    </div>

.portfolio-wrapper {
    display: inline-block;
    width: 300px;
    border: 1px solid #000;
    padding: 10px;
}
.portfolio-single {
    margin: 0px 0px 10px;
}
.portfolio-single,
.portfolio-thumb,
.portfolio-thumb img {
    height: 300px;
    width: 300px;
}
.portfolio-info {
    border: 1px dotted gray;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 300px;
    text-overflow: ellipsis;
}

JSFiddle of this example