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

Question

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>

do they need to be in divs?... becasue normally. you dont put `one` sentence spread out over 3 divs lol — DiederikEEn, May 16 '13 at 14:18
In my application, there is an "event title" followed by a "genre" and they have different styles but are on the same line. The remaining lines all have the same style as the "genre." — Kevin Cooper, May 16 '13 at 14:20

DiederikEEn · Accepted Answer · 2013-05-16T15:14:27.970

3

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

edited May 16 '13 at 15:14

answered May 16 '13 at 14:24

DiederikEEn

753
8
17

Ah, this is what I was looking for. I will play around with this and let you know how it works. – Kevin Cooper May 16 '13 at 14:25
@Kevin ? why not? you give the first part, a bold, i see bold, you gave 5px padding, i see 5px padding – DiederikEEn May 16 '13 at 14:36
When you make the window smaller, the whole div jumps below the image – Kevin Cooper May 16 '13 at 14:37
what browser are you using? see nothing in my FF and how do you want to react it? – DiederikEEn May 16 '13 at 14:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30073/discussion-between-diederikeen-and-kevin) – DiederikEEn May 16 '13 at 14:43
Thank you very much for your time! The final solution is here http://jsfiddle.net/HMAM5/4/ – Kevin Cooper May 16 '13 at 15:15

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

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

edited May 23 '17 at 11:45

Community

1
1

answered May 16 '13 at 14:26

Danield

121,619
37
226
255

That fiddle is exactly what I need, I'm confused how it works though; in a previous question I determined I NEEDED the table-cell display to fix a separate issue (http://stackoverflow.com/questions/16575533/simple-way-to-vertically-align-a-nested-div/16575557) – Kevin Cooper May 16 '13 at 14:28
This does appear to be what I'm looking for, however I would prefer to do it without the top padding. I want this to be as extensible as possible, because in the future I will likely make the image resize depending on the screen. This is for mobile devices. – Kevin Cooper May 16 '13 at 14:40

Andrew Clody · Answer 3 · 2013-05-16T14:34:17.030

1

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/

edited May 16 '13 at 14:34

answered May 16 '13 at 14:27

Andrew Clody

1,171
6
13

So far this looks like the winner. How can I get the second row to ellipsize though? – Kevin Cooper May 16 '13 at 14:36

score 0 · Answer 4 · answered May 16 '13 at 14:41

0

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

jsfiddle.net/TFL5y/3/

answered May 16 '13 at 14:41

Ned

246
2
3
13

I want both lines of text to be to the right of the image, and vertically centered. Sorry this wasn't clear, I've updated the question. – Kevin Cooper May 16 '13 at 14:43
what about something like this jsfiddle.net/TFL5y/4/ – Ned May 16 '13 at 14:58
I need the text to ellipsize, not wrap. – Kevin Cooper May 16 '13 at 14:59
Thanks for showing me something new, i didn't know you could do this until i just solved it lol – Ned May 16 '13 at 15:32

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

4 Answers4