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?)
asp.net-mvc, css, html, word-wrap
Solution
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.
Problem
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?