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/
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'm trying to put a link called Submit resume in a menu using a li tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
Use white-space: nowrap;[1] [2] or give that link more space by setting li's width to greater values.
[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2] white-space - CSS: Cascading Style Sheets | MDN
You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…
display: inline-block; will prevent break between the words in a list item:
li {
display: inline-block;
}
Bootstrap 4 has a class named text-nowrap. It is just what you need.
In your CSS, white-space can do the job
possible values:
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal
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 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>