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?

Answer 1

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.

Answer 2

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!