In html /css, is there anyway to have a span "cut off" instead of going on to another line (and visually showing the cut off?)

Question

I have a asp.net-mvc web page where I show some text on a line after a few images and I don't want the text to wrap to the next line. I want it to cut off and includes a "..." at the end if there is a cutoff? (I am nervous if there is no visual indicator that there is a cutoff then users won't realize it happening . .

  <img src="some_image.png">
  <img src="some_image1.png">
  <img src="some_image2.png">
  <span id="myText">a bunch of text after the images</span>

#myText
{
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

So if the data content only takes a whole line then show the full description but instead of wrapping to another line it appends a "..."

I could do some "trim" logic on the server side simply based on string length, but I don't see how could detect if a wrap would take place (given users screen widths, etc)

Any suggestions for this situation?

possible duplicate of [Anybody know a way to use CSS text-overflow on text that's wrapping?](http://stackoverflow.com/questions/2390086/anybody-know-a-way-to-use-css-text-overflow-on-text-thats-wrapping) — Anonymous, Apr 19 '14 at 17:02
It may not be an *exact* duplicate, but it gets the point across. — Anonymous, Apr 19 '14 at 17:04

score 13 · Accepted Answer · edited Oct 21 '14 at 02:50

13

Just CSS: http://jsfiddle.net/FdyG2/1/

div { 

    width: 400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

}

Avoid breaking line: white-space: nowrap;

Three dots at the end of the line: text-overflow:ellipsis;

Important: you need to set width and overflow:hidden.

edited Oct 21 '14 at 02:50

leora

188,729
360
878
1,366

answered Apr 19 '14 at 17:07

Programmeur

1,483
4
22
32

1

This is the correct answer AND it does work with span. Should not be downvoted! I added a fiddle with span here: http://jsfiddle.net/FdyG2/2/ – Slugge Apr 19 '14 at 18:10

score 1 · Answer 2 · edited Apr 19 '14 at 18:35

1

Here is a http://jsfiddle.net/GdU9Q/ that shows you how you could do it.

Your JS:

$("#wrapper").dotdotdot({
    wrap: 'letter'
});

Your HTML: In html /css, is there anyway to have a line “cut off” instead of going on to another line (and visually showing the cut off?)

Your CSS:

#wrapper {
    width: 200px;
    height: 20px;
    border: 1px solid red;
}

I wish it helps you. Good luck!

edited Apr 19 '14 at 18:35

leora

188,729
360
878
1,366

answered Apr 19 '14 at 17:09

Federico Dorfman

133
8

as per my question, I don't want to have a hard coded width . . i want it to figure it out . . – leora Apr 19 '14 at 17:37
also, my text is in a span (not a div) – leora Apr 19 '14 at 17:45
there is no need to down vote the answer, you just need to adjust it to your needs.. if you want the width to"figure it out" make it a percentage or calculate it with javascript, i don't know what you need it for or how should it work. And regarding the element type, just change div to span it is exactly the same, it was only an example of what you could do.. – Federico Dorfman Apr 19 '14 at 18:14
I removed the down vote but I still don't understand how percentages would solve this as i don't know that upfront. the point of my question was to us the "rest of the current line" . . – leora Apr 19 '14 at 18:37

In html /css, is there anyway to have a span "cut off" instead of going on to another line (and visually showing the cut off?)

2 Answers2