I have to use title attribute to show the entire text in case the label size decreases and forces an ellipsis. Now the problem is my page might be accessed by touch interface users and they might not have the option to hover (apart from galaxy note users).
I was hoping someone is aware of a control within HTML5/HTML for touch devices which will toast the title text on the screen next to a div on tapping the div for complete text.
See usage of title & abuse of title tags. HTML5 has not spoken on this so far.
You might need to implement the double tab event yourself using js or use jquery doubletap
Alternatively, hover event is implemented by many mobiles devices to be fired on the first tap... fiddle
CSS
span {
width: 100px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span:hover {
overflow: visible;
}
HTML Code
<span>Test test test test test test</span>
Related
I am trying to change the design of the navigation on my site.
We have some products with really long names and I want to cut them short and maybe add (...) or something similar at the end.
So something like this should look like abcdefg... instead of abcdefghijklmnopqrstuvwxyz
a{
width:50px;
overflow:hidden;
}
abcdefghijklmnopqrstuvwxyz
A JS solution is welcome.
I would also like to know why the width isn't being applied?
Use white-space combined with overflow & text-overflow. And don't forget to add display: inline-block to the a element, so you can apply width to it.
a {
display: inline-block;
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
abcdefghijklmnopqrstuvwxyz
Anchors are inline elements by default and any width set on an anchor is ignored. Change the display to inline-block:
a {
width: 50px;
overflow: hidden;
display: inline-block;
}
abcdefghijklmnopqrstuvwxyz
As MDN states:
Inline elements are those which only occupy the space bounded by the
tags defining the element, instead of breaking the flow of the
content.
and...
You can change the visual presentation of an element using the CSS
display property. For example, by changing the value of display from
"inline" to "block", you can tell the browser to render the inline
element in a block box rather than an inline box, and vice versa.
Hovewer, doing this will not change the category and the content model
of the element. For example, even if the display of the span element
is changed to "block", it still would not allow to nest a div element
inside it.
I have a little question, i have too long text in my cell in table in html, so i use text-overflow property set on ellipsis in css like in this example from w3c: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
and I wonder if I can make for example that popup will show up after hover on that 3 dots on the end of text, is that possible without complicated js code? Or i have to make my own piece of code that will show 3 dots instead of rest of text and then attach on hover function to them or something ?
You can use title attribute of element to achieve your objective without writing any extra code. Just run following snippet and hover over the text to see the result.
.ellipses {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>
I have a fixed size container in which I wish to display variable-length multiline text with known font size, line height, etc.
If the text fits inside the container: it is centered vertically
If it does not fit inside the container:
Any overflow is hidden om a per-line basis (i.e. so that last line is either fully displayed or hidden but not half-hidden)
Text is displayed from the start (instead of only the middle portion showing up due to vertical centering)
An ellipsis is appended to the text (either real one or fake one via CSS hack)
As a bonus, if there are more dynamic solutions with scrolling text or "Read more..." auto-inserted via JavaScript, please mention these to or post a link.
The solution should work or at least have graceful fallbacks for older browsers starting from IE9 (don't care about older versions of IE).
Example usage: comment inside a fixed-size speech bubble:
EDIT:
I suppose I could use
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: #line-height; /* fallback */
max-height: #max-height; /* fallback */
-webkit-line-clamp: #line-number; /* number of lines to show */
-webkit-box-orient: vertical;
But, first of all, it's webkit-only. And secondly and more importantly, how do you then center text vertically when it does fit inside the container?
You should be able to use the text-overflow: ellipsis; property in your css for this. As far as vertically align, I always recommend flexbox and using display: flex; with align-items: center.
EDIT: Flexbox does not work in IE9. In that case, I would recommend wrapping the text in another div and giving it margin: auto; That will put it in the middle of the div.
I am working on a khmer site, I dont know the language, the words are too long. I am trying to fit them in div but they are over flowing. Is there a way that the part of word comes down automatically such that it fits in the div, and over flow part is in next line.
I dont know what to do with it, please help.
Find the image in the attachment
You should use the word-wrap property of CSS to force the text to stay inside div without overflowing.
word-wrap: break-word
See the DEMO here
Check without this property and with it to see the difference.
See if this works - word-wrap: break-word;
Use the word-wrap CSS property:
.mydiv {
word-wrap: break-word;
}
You can give the below CSS style to the div to prevent the div text from overflowing.
div {
word-wrap: break-word;
}
There is an CSS Attribute for "text overflow" inside HTML Objects
You can do somesthing like that to prevent an overflow by default.
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
reference at W3School
Please note that text-overflow property only occurs when the containers overflow property has the value hidden, scroll or auto.
If you want to warp the long words in multiple lines instead of just "cutting" them you may use "word-wrap: break-word;" which causes the Browser to split long words. (reference)
Please note that both specs are widely supported but very old browsers may ignore them. You can see details in the references.
How can I completely remove the default browser tooltip displayed when hovering over a truncated part of text in a link?
Text is truncated because of a css ellipsis rule :
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
When I apply these rules to a fixed width div, I get a html tooltip. (Only in Safari, not in Firefox or Chrome.)
Here is a jsfiddle.
I tried adding a JS preventDefault and adding an empty title attribute, but none of these work.
The ability to show tooltips for elements with text overflow cut off with ellipsis that don't have a non-empty title is part of WebKit core, but it's turned off by default. Only Safari overrides that and has the behavior enabled. There's no way to turn that off from your application code.
As a work-around, add an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be done either for real, as #bas's answer already shows, or by creating a pseudo-element with CSS:
&::after {
content: '';
display: block;
}
(using SCSS syntax). If you use Sass and create a mixin encapsulating the hiding of text overflow with ellipsis, this can be a nice addition without the need for any extra HTML mark-up.
I was also not allwed to use pointer-events:none, because it is a link. I was inspired by the answer of user1271033. The examples did not work for me, but adding an empty div before the text inside the truncated div worked for me.
Example:
<div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;width:50px;">
<div></div>
Test test test
</div>
How about this http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? Maybe it will be suit you. Examples:
<div class="text-container">longlonglonglongname</div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: '';
display: block;
}
<div class="text-container" data-name="longlonglonglongname"></div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: attr(data-name);
}
You can disable the tooltip in Safari by setting pointer-events: none; in the CSS. Be aware though, this disables all pointer events, so if it's a link, then the link will disable as well.
Add css in your code
pointer-events: none;
Even you can create new css for it and apply wherever required.
You can do it in this way :
<div id="fix" title=""><span style="pointer-events:none;">Lorem ipsum dolor sit amet</span></div>
Have a looke
https://jsfiddle.net/poojagayake/tx06vq09/1/