I have created an ASP page in which I am displaying events. I have used css to display maximum 3 lines of content in one item template.
I want to display 3 periods after the text i.e. :
I searched over the internet and found solution to add periods after the text using .after{content:"..."} but the dots are placed in new line but I want to get the exact output as it is in image.
My css is:
.eventDescription
{
height: 45px;
margin-left: 65px;
font-size: 15px;
line-height: 1.5em;
overflow: hidden;
text-align: justify;
line-height: 15px;
padding-top: 10px;
width: 220px;
}
Use :after pseudo along with content property
Demo
You can control the dots spacing, or size using font-size and letter-spacing property respectively.
Demo 2
Coming to your syntax, you are using .after{content:"..."} so first of all you need to assign class to the element here, so it will be <p class="after"> and also you need to add :after pseudo to your .after class
.after:after {
content: "...";
}
Note: Using :after, the content will be inline by default, inorder
to apply margins or paddings you need to use inline-block;, also, older versions of IE won't respect this property.
For more information on browser support for :after
Related
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
Clean Solution
You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem (Root EM) unit to maintain relative font-sizes in the :before element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
This might be a totally silly question. Here is my problem - I have a message box displayed in HTML (using Bootstrap) to show various user alerts. It has an information icon (using bootstrap glyphicons) and associated message. Everything looks fine unless the message is too long. Then the second line will wrap under the icon. I want the multiple lines to wrap starting where the first line starts.
So this would be wrong:
(i) This is an incorrect
format of the message
And this would be right:
(i) This is the correct
format I want
My HTML/CSS is very simple:
<div class='alert alert-info'>
<span class='glyphicon glyphicon-information'></span>
  my message comes here.
</div>
But I looked at couple of sites including css-tricks and all the solutions seemed really complicated. So I am posting here to see if there is a quick and easy way to do this.
You can play with CSS positioning, what you need to do is, push the entire element to the left using margin-left: 30px; and than, assign position: relative; to the container element so that we make sure that the absolute positioned element doesn't flow out in the wild.
Now we use position: absolute; for your glyph icon and use negative left value and a positive top value to set the icon correct, please tweak these values according to your requirements, rest stays the same
.alert {
margin-left: 30px;
width: 50px;
position: relative;
}
.alert .glyphicon {
position: absolute;
left: -15px;
top: 2px;
}
Demo
what about wrapping your message inside it's own span and styling it to have a margin-left of 15px or whatever width the information icon is? are you unable to do that? if so, you can set the style on the
.alert .alert-info {
margin-left:15px;
}
and subsequently set the margin on the span to 0
div .glyphicon glypicon-information{
margin: 0;
}
I simply want all of my p elements to be the length of the text in it. It works if I put .intro p at inline-block, but I would like my p elements all to be displayed underneath each other. Is there a way to do this?
HTML:
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p>
<p>hsdqjkf kjdsh</p>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p>
</div>
CSS:
.intro {
margin-top: 80px;
color: #ffffff;
text-align: center;
}
.intro p {
margin-bottom: 12px;
padding: 6px 12px;
background: #25d6a2;
}
Just add br tag after each p element
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p><br>
<p>hsdqjkf kjdsh</p><br>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p><br>
</div>
Demo
If you don't want to add <br /> in the DOM or for some reason you cannot modify your HTML, you can simulate line break using CSS :after pseudo with content property having an value of \a and white-space set to pre
As far as the explanation goes for \a, its an hexadecimal value for line feed which is equivalent to 10.
p:after {
content:"\a";
white-space: pre;
}
Demo
In a sense, you want to eat your cake and keep it: make the p elements inline elements as far as box formatting is considered (in this case, for the purpose of setting background behind the text only) but block elements in the sense of starting on a fresh line.
There are various methods and tricks, but perhaps the simplest one is to use floating (instead of display: inline-block): float the elements to the left but also clear floating, so that no real floating takes place—you just want the side effect of floating, the effect of making the element just as wide as its content requires:
.intro p {
float: left;
clear: both;
}
In addition, you need to set clear: both on the element after the intro.
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.