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;
}
Related
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 just working at an CMS site...but just got into a problem that the slider had text been written first in horizantal one line and now it shows into vertical text per word in every line like in a continuous way...so I am really wondering that what's happening the text to be showed in vertical form instead of horizontal form..so friends any help please...anyone who can tell or findout the real issue..!
The Text Is : "Serving Over 40 Years"
Here it's HTML Code :
<div class="txt2">Serving Over 40 Years</div>
While here it's CSS code :
.slider .txt2{
width:100%;
height:30px;
z-index:11;
font-family:'NeouThin';
font-size:30px;
line-height:30px;
color:#000000;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
}
Here is slider class CSS code please :
.slider {
position: absolute; left:0px; top:0px; z-index:6;
display: block;
width:975px;
height:537px;
overflow:visible!important;
}
And Here is live link to the site please : http://www.huntedhunter.com/raymain_errors/
waiting for your replies..thanks..
Thanks..
Just add white-space: nowrap; to the txt2 class and it works.
Awesome picture slider btw !
You should set your height to auto like this:
.slider .txt2{height: auto /*Rest of CSS Code*/}
The parent element of that text <div style="position:absolute; left:50%; top :-20%;"> has a width of 0 pixels, since it has not a defined width and a position: absolute. If you define the width for this element, say a width of 200px, the inner element with the text will have this width.
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
My div css looks like
#another_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:6%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
}
In this div I am loading some dynamic content coming from some page. It's showing like
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB
But I want it as
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBB
I already tried the "white-space": "nowrap". Didn't work.
It's a marquee so it should be floating in a single line. Why is it breaking?? I checked the line. There is no line breaking tag. How can I make it marquee in a single line?
white-space: nowrap; should work. Check the demo below
DEMO
white-space: pre; will take out all your breaks!
I've currently got a div tag with several text rules set, p, h1, h2... etc etc.
I'm wondering is there anyway I can make it so that one of these rules will not go onto the next line down if the text becomes too long for the width of the div and instead, the text which runs off the div not being displayed in the browser?
So, for example, my p tag is normal, if the line of text gets too long it will simply overflow onto the next line down, same with my h1 and h2 but I want my h3 to only ever take up one line and to never take up more than one, even if that means some of the text getting chopped off at the edge of the div.
HTML
<div id="box">
<h1>This is the first header and this will overflow onto the next line when it gets too long.</h1>
<h2>This is the second header and this will overflow onto the next line when it gets too long..</h2>
<p>This is the paragraph and this will overflow onto the next line when it gets too long.</p>
<h3>This is the third header and I do not want this to overflow when it gets too long... But it does :(</h3>
</div>
CSS
#box {
position:absolute;
width:540px;
height:auto;
left:80px;
top:0px;
padding-bottom:20px;
background-color:#000000;
}
#box h1{
font-family:Ebrima;
font-size:22px;
font-weight:normal;
text-decoration:underline;
text-align:center;
margin-bottom:10px;
color:pink;
}
#box h2{
font-family:Ebrima;
font-size:20px;
font-weight:normal;
font-style:italic;
text-align:center;
margin-bottom:15px;
color:lightyellow;
}
#box h3{
font-family:Ebrima;
font-size:14px;
font-weight:bold;
text-align:center;
margin-top:10px;
margin-left:25px;
margin-right:25px;
color:lightgreen;
overflow:hidden;
}
#box p{
font-family:Ebrima;
font-size:16px;
font-weight:lighter;
text-align:justify;
margin-left:25px;
margin-right:25px;
color:lightblue;
}
I also made a JSfiddle to help.
I have tried adding overflow:hidden; to the h3 rule and that worked in firefox but not in IE, Opera, Chrome or Safari.
I've also tried text-overflow:hidden; and textoverflow-hidden because for some reason I thought those might work but they didn't in any of the browsers.
Should any of those have worked properly or are there other ways I can achieve this?
white-space: nowrap;
overflow: hidden;
should do it (in ie8 and up at least)
*edit Just double-checked and it shoudl be ok in older ie too http://reference.sitepoint.com/css/white-space
You need to specify a height in order for overflow: hidden to work as you expect.
Use the following rules:
overflow: hidden;
white-space: nowrap;
Note that nowrap doesn't have a hyphen.
text-overflow: clip
this should help. Read here: https://developer.mozilla.org/en/CSS/text-overflow