CSS如何继续文字而不会在<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; }

演示版

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