CODEWITHSUNDEEP
htmlcss
Kevin Cooper
Kevin Cooper

Reputation: 5377

How to keep text on a single line without wrapping the div?

Here is a JSFiddle of what I'm trying to do. I want both sentences to be on one line each, and ellipsize if they run off the page. This works for the first sentence, but the second sentence makes the whole inner2 div get pushed down if it gets cut off. My code is also below.

Clarification: This only happens when the window is made very small. The whole inner2 div jumps down below the image, when instead it should ellipsize both rows of text. I want both lines of text to be to the right of the image, and vertically centered.

Update: As posted by Andrew Clody, this JSFiddle is much closer to my desired result. The div no longer jumps, but the second row of text does not ellipsize. My desire is for both rows of text to ellipsize.

<html>
<header>

<style type="text/css">
.outer
{
}
.inner1
{
    float:left;
    width:80px;
    height:80px;
    background-image:url('http://www.google.com/favicon.ico');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.inner2
{
    display:table-cell;
    height:80px;
    padding-left:10px;
    vertical-align:middle;
}
.text1
{
    padding-right:5px;
    float:left;
    font-weight:bold;
}
.text2
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>

</header>
<body>

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2">
        <div class="text1">This long sentence</div>
        <div class="text2">should definitely all be on one line</div>
        <div class="text2">This should all be on the next line and not wrap</div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Views: 4614

Answers (4)

DiederikEEn
DiederikEEn

Reputation: 743

You might use spanns for that. check it out: fiddle

<span class="event">Event here</span> <span class="genre">Genre here</span>
    <span class="something">Maybe something more</span>

.event{
    color:blue;
    font-size:20px;
}

.genre{
    color:green;
    font-size:15px;
}
.something{
    font-size:12;
    color:red;
}

Edit// here is the good fiddle :) Demo

Upvotes: 3

Ned
Ned

Reputation: 246

Just simply take the div outside of the inner2 div and it works, as it then won't float (wrap)

jsfiddle.net/TFL5y/3/

Upvotes: 0

Danield
Danield

Reputation: 125463

I think that display:table-cell on the .inner2 class is what was causing the problem.

I realize that you were using this to vertically center the text - but this can also be achieved with some top padding.

Also I added overflow:auto to trigger a block formatting context on the inner2 class so that it takes up the remaining horizontal space. See here for more info.

Here's un updated fiddle

Upvotes: 1

Andrew Clody
Andrew Clody

Reputation: 1181

To get the behavior I think you're searching for, the parent needs to be a table-row.

.outer
{
    display:table-row;
}

Edit: New Fork

http://jsfiddle.net/4Scq7/

Upvotes: 1

Related Questions