CSS how to continue the text without breaking into new line in a

Question

I just wonder how should I add to my div style to have the text continues with "..." instead of breaking into a new line like this:

no line break

my code is below, i would like that style to be with my 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>

Thank you

That is done using `text-overflow: ellipsis` like [here](http://jsfiddle.net/4JxBt/). All CSS properties mentioned in that fiddle are mandatory for it to work. I think this question is a duplicate and hence not adding as answer. — Harry, Aug 02 '14 at 05:57
Possible duplicate of http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet. — Harry, Aug 02 '14 at 06:06

score 1 · Answer 1 · answered Aug 02 '14 at 06:04

1

Try below

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

Demo

answered Aug 02 '14 at 06:04

Dinesh Mandaviya

192
5

score 1 · Answer 2 · answered Aug 02 '14 at 06:09

You need to set the .portfolio-info to display: block, and set it's white-space to no-wrap, keeping the text in one line. You can't have block-level elements like h2 in an inline element so I changed it to a span. You can then set a fixed or percentage-based width to keep that div in the container at a specified size. Then, all you need to do is just set the .portfolio-info to text-overflow: ellipsis, making the overflowing text end with an ellipsis character.

If possible, avoid using inline attributes like height and style, use plain CSS instead to keep the markup and the styling separate.

<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

CSS how to continue the text without breaking into new line in a

2 Answers2