Look at this fiddle.
Enter Ctrl+F and search "gets" ...
For me Chrome finds invisible text from this text: A long option that gets cut off
It's reproduced on Linux/Ubuntu 12.04 Chrome Version 31.0.1650.63
HTML
<!--works for a div-->
<div>
A long option that gets cut off
</div>
<!--but not for a select-->
<select>
<option>One - A long option that gets cut off</option>
<option>Two - A long option that gets cut off</option>
</select>
CSS
select {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
div {
border-style:solid;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
How do I show the text when it is found on a page, rather than a blank chunk of whitespace, highlighted by the browser?
Unfortunately, this is a known bug in Chrome.
Bug Reports:
https://bugs.webkit.org/show_bug.cgi?id=93709
https://code.google.com/p/chromium/issues/detail?id=13563
It happens because of text-overflow: ellipsis; the bug report says.
No solution to the bug, since 2010!
Avoid the problem...
This is not as pretty, but it works in light of the known issue:
select {
width:100px;
overflow:hidden;
white-space:nowrap;
/* text-overflow: ellipsis; */
}
div {
border-style:solid;
width:100px;
overflow:hidden;
white-space:nowrap;
/* text-overflow: ellipsis; */
}
Fiddle: http://jsfiddle.net/digitalextremist/t5eUe/228/
Or work around it...
Use JavaScript to detect the overflow, and insert an ellipsis yourself, as an image ( or a block of text ) on the right and/or left of the div, or on the inside of the right side ( with a higher z-index ), etc:
Detect if text has overflown
Related
I have an element with some text title. It shows fine in chrome as below
But not visible in firefox as you can see below:
CSS settings i applied are
.editable-text-text
{
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:text-top;
padding-right:20px;
max-width:100%;
}
If i make max-width:98% than i can see the text but then i loose text... behaviour. How do i achieve the
same result in firefox as i have in chrome.
html part uses aurelia framework.
<div class="editable-text-hitbox" if.bind="(!isEditing || !isEditable) && value">
<div if.bind="contentType!='number'" class="editable-text-text" title="${value} ${unit}">
${value} ${unit}
</div>
</div>
There are some answers on this question, one that uses display: -moz-inline-stack; and one that doesn't.
This Mozilla blog post has more on display: -moz-inline-stack;.
This is the example:
<style>
div {
background-color: skyblue;
height: 100px;
}
.posttext {
word-wrap: break-word;
-ms-hyphenate-limit-lines: 10;
text-overflow: ellipsis;
}
</style>
<div>
<p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>
When you decrease the width of your browser enough the text will continue to show under the blue colored div. I found a way to stop it using 'text-overflow: ellipsis' but it stops at the first line.
Is it possible to make it continue until it reaches the height of the div and then show three dots at the end rather than continuing under it?
Below properties are useful when you want to show ellipsis at the end of single line.
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp
There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/
I have div with overflow:hidden and some text in it, last line is visible halfway. What should I do to hide this last line from div? Or even add some ellipsis.
Is is possible to do this with css only? (I don't want to change font size, or change display:hidden)
For example: (http://jsfiddle.net/xp32ekqc/)
html:
<div>
Hello World, Hello World, Hello Booom
</div>
style:
div {
height:100px;
width:50px;
overflow:hidden;
border:1px solid black;
}
I'd like to see all text without "Boom" or instead of Hello Boom - Hel...
Hi i am facing same issue,if your text is in one line then text overflow working fine but now your doing something different i.e you want ...... after 4 or 5 line so you have to apply ellipsis in height.
see this example:
div {
height:90px;
width:50px;
overflow:hidden;
border:1px solid black;
}
.myDiv{
display: block; /* Fallback for non-webkit */
display: -webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="myDiv">
Hello World, Hello World, Hello Booom
</div>
As you can see in above example -webkit-line-clamp:5; so it will add .... at 5 line.
Note: What is -WebKit
WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome.
List of rendering engine for Web browser
IE
Engine: [Trident][2]
CSS-prefix: -msie
Firefox
Engine: [Gecko][3]
CSS-prefix: -moz
Opera
Engine: [Presto][4]
CSS-prefix: -o
Safari & Chrome
Engine: [WebKit][5]
CSS-prefix: -webkit
So for Safari/Chrome use -webkit in css and for other
browser use css-prefix as mentioned above
Try:
text-overflow:ellipsis;
white-space: nowrap;
In your css. I hope your helped with this. I have attached a link to jsfiddle: JSFiddle Demo
When trying to hand-made a slider, I noticed that, in Webkit/Blink (Chrome Desktop and Android stock browser), the last slide under my CSS will always be pushed into the next line, no matter how much slides in the container:
// dynamatically insert the "scene"s
// so no white space and/or line breaks occurs
[].forEach.call(document.querySelectorAll("div.container"),function(container){
var scene;
// number of children doesn't matter
var all=Math.floor(Math.random()*15)+1;
for(var i=0;i<all;i++){
scene=document.createElement("div");
scene.className="scene";
scene.appendChild(document.createTextNode(i));
container.appendChild(scene);
}
});
div.container
{
width:50px;
overflow:visible;
white-space:pre;
outline:1px solid red;
}
div.container > div.scene
{
width:100%;
height:50px;
background-image:linear-gradient(to bottom right, #FFF, #000);
display:inline-block;
vertical-align:top;
font-size:20px;
color:blue;
}
<!-- prepare the container -->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
I also made a jsfiddle
This is what it looks like in three major browsers:
Why is WebKit/Blink so special in this case, and how can I make them behave like Gecko/Trident?
Edit:
The width:50px in .container is just a convenience way to demonstrate the problem; in real product it's 100% viewport width, and width:100% in .scene is actually intended, instead of hard-coded 50px;
The .scenes in real product are usually images that I may not know their dimension before hand, so the height:50px here is just to make the output looks more "clean", and the height:auto in .container is intended.
UPDATE
Maybe try white-space: nowrap; in .container to suppress text wrap and line breaks instead of white-space: pre; ( pre preserves new lines). Read more about white-space property here: http://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Note: No clear explanation why this works. Just that Chrome seemed to be wrapping the divs around for some reason. Probably a bug in chrome/webkit.
w3schools.com/cssref/css3_pr_text-overflow.asp
How can I create a div and have the text in it wrap normally but only up to a certain line (e.g. the second line), and from then on have the text-overflow: ellipsis property come into effect and hide the remaining text in that div as in the above link?
Personally I use the Trunk8 plugin which does exactly what you want. Have a look at the demo
For example in your case with the plugin you'd use:
$('#div').trunk8({
lines: 2
});
Plugin Link
For a pure CSS workaround and since text-overflow is not intended to multi-line text you may use a hack if you have fixed width and line-height for your text container and control where your text should start hiding.
CSS for simulating text-overflow:
div{
width:55%;
padding:20px;
line-height:20px;
height:20px; /*for showing 2 lines of text*/
overflow:hidden;
position:relative;
}
div:after{
content:"...";
position:absolute;
bottom:0;
right:10px;
}
See this demo: http://jsfiddle.net/kfJAy/
There is no css for what you want to do, but a possible workaround is this:
.ellipsis{
line-height: 10px; //10px for easy multiplication
height: 30px; //line-height * n
text-overflow: ellipsis;
}