I need to get elipsis to work for a paragraph, but when I change the height from height:2.5em; to height:1.25em;, the elipsis go away.
.a {
font-size: 13px;
display: block;
width: 100%;
height: 2.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
.b {
height:1.25em !important;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
<p class="a b">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
By decreasing the height, you decreased the number of lines that can be shown. So you have to decrease the -webkit-line-clamp value to match the maximum number of lines. In this case, it is 1:
.a {
font-size: 13px;
display: block;
width: 100%;
height: 1.25em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
The problem is that you have -webkit-line-clamp set to 2. You will need to change that to 1.
Keep in mind that this method is quite fragile and will break if you add padding to your anchor and may be hard to maintain in different viewports.
There are several important things you should consider here.
First you can set a line-height. Then you will want to multiply each line-clamp times the line-height, and set that value to max-height.
For example:
max-height = (line-height)(-webkit-line-clamp)
max-height = (13px)(2)
max-height = 26px
.a {
font-size: 13px;
line-height: 13px;
max-height: 13px;
display: block;
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and
researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
I'm trying to do line-clamping and that is the example of what it is.
So it happened that in my application instead of whitespaces " ",   are being generated.
The thing is when I try to do this, the first line is displayed ugly because in that line phrase is being divided into two words. And in my main project I can't do anything about   vanishing.
So is there any CSS solution to make it look good?
Here's the codepen.
HTML
<div class="container-fluid">
<div class="col-md-4">
<div class="jumbotron">
<div class="row description">
<p>
Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words
</p>
</div>
</div>
</div>
</div>
CSS
$font-size: 14px;
$line-height: 1.3;
$lines-to-show: 8;
.description {
display: block;
display: -webkit-box;
height: $font-size*$line-height*$lines-to-show;
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.jumbotron p {
font-size: 14px;
margin-bottom: 0;
}
.container-fluid {
margin: 30px 60px;
.jumbotron {
background-color: #00FFFF;
padding: 0;
}
}
The one thing I would suggest is for you to use:
text-align: justify;
This will stretch the text for being full width of the container.
The solution would be of using text-align: justify;, but the problem of space button generating might be the same than I'm having occasionally.
If seems like the Google Chrome browser in some situations uses the instead of the regular whitespace. Using a different browser might work off in the future.
EDIT: There is the non-CSS solution for exactly what you're seeking to solve, just use this original topic reversely.
Context: (simplified)
<div style="width:300px;" >
<img src="blabla..." />
<div style="oveflow:hidden; etc..." >
description
</div>
</div>
Problem:
Sometimes the description can be very long and gets cut (intended, see "overflow:hidden;"). So I made it so that when the user hover the description a css animation pushes the description to the left side a bit, let's say "margin-left:-200px;". This way the user can continue reading the description while it reveals itself (css animate).
Now comes the issue: the description can vary from long to very long to very very long. And obviously pushing it to the left for -200px is sometimes not enough, sometimes too much.
Solutions I know:
1)
Javascript/jQuery
My website is full non-js and very lightweight, I do not want to use js. I found many solutions on the web using js, I already know them. Please respect this. I would love to solve it via pure css.
2)
<marquee>description</marquee>
Depreciated.
Ideas:
I was thinking about "tricking" it using PHP code. For example I would calculate the description's length so that I could set a "margin-left:-???px;" accordingly. Now that sounds even uglier than js to me, forcing me to "hardcode" it in the php file bypassing the conveniant css stylesheet and resulting in a heavy php file. Irrelevant.
I didn't find anything in the CSS3 about it eventhough many other designers came accross this issue from what I could find searching on GG. Is it beyond css language's scope?
Thank you.
PS: my description MUST fit in 1 line. No line break, no scrollbar, no "show more" button, etc.
you could use echo <br/> with php when a certain length is reached
each time.
you could use css max-width property to restrict the width to a
certain amount
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap
p.test {
word-wrap: break-word;
}
Is this what you're looking for?
Closest I could come.
I am slightly concerned that the slide eventually end with the description hidden but I think that's a small price to pay...otherwise I think it meets most of the criteria
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 300px;
margin: 1em auto;
border:1px solid green;
display: flex;
flex-direction: column;
}
.wrap img {
max-height:100%;
width: auto;
}
.desc {
width: 300px;
height: 15px;
white-space:nowrap;
overflow: hidden;
font-size:13px;
line-height: 15px;
position: relative;
}
.wrap .desc p{
position: absolute;
transform: translateX(0);
transition: transform 5s ease;
}
.wrap:hover .desc p{
transform: translateX(-100%);
}
<div class="wrap" >
<div class="image">
<img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="" />
</div>
<div class="desc" >
<p>Tri-tip shank turkey chuck, porchetta drumstick andouille beef ribs prosciutto salami beef. Ham hock pork belly pig pastrami. </p>
</div>
</div>
Codepen Demo
What i would suggest you is fix the width and height of the description div and use the css property overflow-y:auto.
The default scrollbar is ugly and different for all the browsers so you may try a js plugin but as you said you don't want to add a library just to achieve a small task.:)
Try this-
div.test {
white-space: nowrap;
width: 12em;
overflow: hidden;
height:30px;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box. This is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
I want to wrap my long article in to three to four lines and a more button below. Currently, i am using the below css code.
.truncate {
width: auto;
text-align: justify;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The above css class does what i want . However, it shortens the artcile to a single line code code only. I tried everything possible to make it in to three or four and half lines and din't succeed. I thought of adding a height property and didn't change. please how do i control the number of lines. ? Any help would be appreciated.
Update
Just like on SO here . A question title, and just two lines from the post. Please how do i achieve that ?
You can use -webkit-line-clamp: 2; -webkit-box-orient: vertical;. But it's only for webkit browsers.
http://jsfiddle.net/tv2mfxe5/1/
.truncate {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
And if this doesn't work for you. I would recommend using a jQuery plugin, dot dot dot
How to achieve same output without <br>?
<p>hello <br> How are you </p>
output:
hello
How are you
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:
p {
white-space: pre;
}
<p>hello
How are you</p>
Note for IE that this only works in IE8+.
Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.
I suggest using spans that you will then display as blocks (just like a <div> actually).
p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>
Use <br/> as normal, but hide it with display: none when you don't want it.
I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don't have anything personal against <br/>)
While not immediately obvious, you can actually apply display:none to a <br/> tag to hide it, which enables the use of media queries in tandem with semantic BR tags.
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
#media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
This is useful in responsive design where you need to force text into two lines at an exact break.
jsfiddle example
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p> tag it is pretty easy to get whatever one wants.
For preserving line breaks but not white spaces use pre-line (not pre) like in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
SOURCE: W3 Schools
The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
In the CSS use the code
p {
white-space: pre-line;
}
With this CSS every enter inside the P tag will be a break-line at the HTML.
Building on what has been said before, this is a pure CSS solution that works.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
To make an element have a line break afterwards, assign it:
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
source: https://stackoverflow.com/a/36191199/2377343
Here's a bad solution to a bad question, but one that literally meets the brief:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
Use overflow-wrap: break-word; like:
.yourelement{
overflow-wrap: break-word;
}
Maybe someone will have the same issue as me:
I was in a element with display: flex so I had to use flex-direction: column.
For a List of Links
The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.
Here's an example, assuming a table of contents:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
Item A1 Item A2
Item B1 Item B2
</span>
And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
Item A1<br/> Item A2<br/>
Item B1<br/> Item B2<br/>
</span>
Note the advantages of the above solutions:
No matter the whitespace in the HTML, the output is the same (vs. pre)
No extra padding is added to the elements (see NickG's display:block comments)
You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
No float or clear styles affecting surrounding content
The style is separate from the content (vs. <br/>, or pre with hard-coded breaks)
This can also work for loose links using a.toc:after and <a class="toc">
You can add multiple breaks and even prefix/suffix text
Setting a br tag to display: none is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
#media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
I like very simple solutions, here is one more:
<p>hello <span>How are you</span></p>
and CSS:
p {
display: flex;
flex-direction: column;
}
How about<pre> tag?
source: http://www.w3schools.com/tags/tag_pre.asp
The code can be:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS would be:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
You need to declare the content within <span class="class_name"></span>. After it the line will be break.
\A means line feed character.
.class_name::after {
content: "\A";
white-space: pre;
}
You can add a lot of padding and force text to be split to new line, for example
p {
padding-right: 50%;
}
Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.
Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead
it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆
Example
#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}
#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>
<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="container">
<h5>No specaes (not working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
<h1> word-wrap: break-word;</h1>
<div class='flex'>
<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="wrap">
<h5>No specaes (working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!
body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}
h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">
Break right after this
<span>
and before this
</span>
</h1>
Here You can see all other options on codepen:
Injecting a Line Break
A modern and simple solution could be setting the width like that:
width: min-content;
This CSS rule is mostly useful for text content, but not only:
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p {
margin: 20px;
color: #222;
font-family:'Century Gothic', sans-serif;
border: 2px dotted grey;
padding: 3px;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head />
<body>
<p class="max"> Max width available </p>
<p class="min"> Min width available </p>
</body>
</html>
Both Vincent Robert and Joey Adams answers are valid. If you don't want, however, change the markup, you can just insert a <br /> using javascript.
There is no way to do it in CSS without changing the markup.
In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:
clear:both;
In case this helps someone...
You could do this:
<p>This is an <a class="on-new-line">inline link</a>?</p>
With this css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Using instead of spaces will prevent a break.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br /> in your text, then giving it a class like <br class="hidebreak"/> then using media query right above the size you want it to break to hide the <br /> so it breaks at a specific width but stays inline above that width.
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
#media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
This works in Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}