If you would like to keep your UI responsive, you might choose to define element width in percentages. You might have read somewhere that using ellipsis and percentage width don’t work together, but this depends on the ‘width’ and ‘display’ properties of your parent elements. The...
overflow:hidden;text-overflow:ellipsis;} .one-long-line:hover {overflow:visible;} When text must stay on one line, but there is not enough room for it all, this article provides a solution. Code notes: The class name "one-long-line" may be any class name that works for you. In...
So then I wondered whether a scripted solution could create some kind of disclosure element, like, the ellipsis at the end being clickable and revealing the additional text. But how would it be revealed? We’ve already seen how a tooltip is not a viable solution, so it would have to be...
When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets. The CSS property text-overflow: ellipsis has been around for quite a long time now but ...
text-overflow: ellipsis comes into play only when: 1. The box has overflow other than visible. 2. The box has white-space: nowrap. Example We have a DIV with 150 pixel width to display the company names from the database. We do not want the values in the company name box ...
Possible complication there is that hyphens aren't responsive to scrolling, whereas the ellipsis is (per spec) intended to be. (At least, not accelerated scrolling; if you trigger layout changes such that text is re-laid out, that's a different story.) ...