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
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;.
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.
I am trying to create paragraphs of text where each word is actually a div containing text and a canvas above it (long story!). This means I end up with a series of divs in each paragraph, which I style as inline blocks. These divs look too close together, so I use the CSS word-spacing property to increase the spacing between them.
This works fine on every browser except Safari. On Safari (OS X and iOS), the words spill over the edge of the containing div, even when I fix the width of the container. I suspect that this is a bug in Safari, since all other browsers seem to render my HTML the same way, but does anyone have a way around it?
I have distilled the problem down to this example HTML:
<html>
<head>
<style>
#box1 {
width: 300px;
background: Red;
word-spacing: 50px;
}
#box1>div {
display: inline-block;
}
#box2 {
width: 300px;
background: Green;
word-spacing: 50px;
}
</style>
</head>
<body>
<div id="box1">
<div>This</div> <div>text</div> <div>should</div> <div>look</div <div>the</div> <div>same</div> <div>in</div> <div>both</div> <div>boxes</div> <div>but</div> <div>it</div> <div>doesn't</div> <div>in</div> <div>Safari</div>
</div>
<div id="box2">
This text should look the same in both boxes but it doesn't in Safari
</div>
</body>
</html>
This can also be viewed as a JS Fiddle here: http://jsfiddle.net/4eh6G/
P.S. On older versions of Safari, there seems to be a different problem, where word-spacing appears to have no effect at all in this example. Any fix for this would obviously be great, too!
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
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;
}