Given a long string of content, I want to display just the first 2 lines of text. The container of this content is fluid and will resize to the browser's width. Regardless of the container's width, I want the text to always only show 2 lines. Is there a way to do this?
If there is no way to do the above, is there a way to restrict based on number of characters?
This snippet will help you.
Just Adjust Max-Height and Line-height for the change in font size.
.limit-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 21px;
max-height: 48px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
A pure CSS solution would imply the use of a stated height for the text block and the ´text-overflow`property. This is rather difficult to achieve because CSS has no notion of lines. A JavaScript solution, instead, would imply a regular expression matching for the newline character.
I have idea of some workaround to solve your problem (couse I think this is not possible by css).
So, my solution works as follow:
var height = parseInt($("#foo").css("line-height"));
var lineCount = 2;
height *= lineCount;
$("#foo").css("height", height + "px");
You take line-height of your container and set height of container to line-height * lineCount.
jsFiddle
You can fix the height of the div and make overflow as hidden
div{
height:auto;
max-height:40px;
overflow:hidden;
background:red
}
DEMO UPDATED
OR
Use simple Jquery method
$('p').condense({ellipsis:'…', condensedLength: 55});
DEMO 2
Related
So I have an issue that appears on Firefox.
Basically I have a container with set width (let's say 300px).
Inside it nested a couple of levels is a component that uses truncation to hide text with max-width. CSS rule would look like this for example:
max-width: calc( ((100vw - 376px) / 12) * 8 + 168px );
Child span uses basic line-clamp + overflow technique for hiding extra content.
What I found out is that this code constrains width of elements of component and truncation works fine on Chrome but it doesn't work as expected in Firefox. I guess that it makes sense since this calculation uses vw for setting max-width but it confuses me why it works on Chrome. Does Firefox somehow differently do calculations?
.wrapper {
width: 300px;
}
.max-width__component {
/* This is probably calculated to be a bigger value than width
of container */
max-width: calc( ((100vw - 376px) / 12) * 8 + 168px);
}
.truncation {
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
<div class="wrapper">
<div class="max-width__component">
<span class="truncation">
Some dummy content that is normally longer and truncated
</span>
</div>
</div>
Thanks in advance.
The problem indeed wasn't with setting max-width
One thing that was missing from my code snippet was another child element that represents icons (https://codepen.io/Skafec/pen/yLbNBJM) but the issue still wasn't reproduced in this codepen.
How I fixed is that I added:
flex-shrink: 0;
on icon wrapper which makes sure that icon always takes the same space and doesn't get pushed outside of the main container.
There's a billion of tutorials, but none have worked for me unfortunately.
I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php
Remember to resize your browser window.
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. I can make the ellipsis work, but then the text is no longer centered.
Any clue on how to do this best? I would really like to avoid any javascript as performance is highly important.
You need to update the rules for h1 with overflow & text-overflow.
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :)
You may control the max-width of h1 too and add a margin:auto; : demo
UPDATE
Using display: inline-block simply removes the h1 altogether on smaller screens. You should avoid this.
Also, technically, the text is still centered. It takes into account the ellipsis when centering the text.
ORIGINAL ANSWER
In order for the ellipsis styling to work, you've got to set a few things on the element with the text:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block ensures that the box you're trying to generate ellipsis on is shown as a block. If it's not, it won't know where the bounding box is.
text-overflow: ellipsis obviously should generate the ellipsis.
overflow: hidden for some reason, browsers won't generate the ellipsis unless you have this. I believe it has to do with the fact that the text will just flow outside the box with it.
white-space: nowrap this prevents your text from wrapping onto multiple lines. That way, you have one line with ellipsis at the end.
That work?
How to fix the height of the vertical text? It is not working properly with line-height or height property
Here is my demo
http://jsfiddle.net/BsZ8f/1/
I tried my hand on the code but couldn't figure out. My solution would be to use just css2 to create vertical text, for this you just need to give the .title a fixed width say 10px just enough to hold one character, this way the text will automatically get aligned vertically and give height: auto; overflow: auto; to make sure the height adjusts.
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;