I'm trying to customize a web page for the company I work for. they give the option o use custom css to edit. They don't give the HTML, if you ask how to edit something they will provide the specific code. they provided the below code, and I'm trying to figure out how to insert a line break in the first text string. any ideas?
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed h1:after {
content: 'THANK YOU FOR APPLYING. WE WILL GET BACK TO YOU SHORTLY.';
float: left;
text-indent: 0;
width: 100%;
}
.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed p:after {
content: 'If you did not receive a reply email within 48 hours, please check your spam or email us: hiring#example.com';
float: left;
text-indent: 0;
width: 100%;
}
To insert a new line / line break in that content, use the \A escape characters. In order for the new lines to work properly, you also need to set the white-space property to either pre or pre-wrap.
content: "THANK YOU FOR APPLYING. \AWE WILL GET BACK TO YOU SHORTLY.";
white-space: pre-wrap;
The \A escape sequence will insert a line break. It works the same as adding a < br /> tag to your HTML.
content: 'THANK YOU FOR APPLYING.\A WE WILL GET BACK TO YOU SHORTLY.';
You can use content:"\a" and white-space: pre to create a line break without adding a <br/> tag to your HTML
It works like this:
.landing .confirmation-container .application-confirmed h1 {
display:inline;
}
.landing .confirmation-container .application-confirmed h1:before {
content:"\a";
white-space: pre;
}
Example:
h1 {
display:inline;
}
h1:before {
content:"\a";
white-space: pre;
}
<h1>Header</h1>
\a means line break (character U+000A)
white-space: pre tells browsers to treat it as a line break in rendering.
Related
I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
content: ": ";
display: inline;
white-space: nowrap;
}
h4 {
display: block; }
h4~p {
display: block; }
h4:first-child {
display: inline;}
h4+p {
display: inline;
}
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!
This question already has answers here:
Newline character sequence in CSS 'content' property? [duplicate]
(2 answers)
Closed 7 years ago.
I have the following CSS:
header h1:after {
content:"Alumni Association";
}
and I want it to display as follows:
Alumni
Association
I have tried \a, \n, <br> etc but none of them work.
I am looking for a purely CSS solution as that is all I have access to...
You need to add white-space: pre; to your class.
h1:after {
content: 'Hello\AWorld';
white-space:pre;
}
You should add white-space:pre; to the styling, and then include \A in the text:
header h1:after {
white-space:pre;
content:"Alumni \a Association";
}
JSFiddle
header h1:after {
content:"Alumni \A Association";
white-space: pre;
}
Try: DEMO
header h1:after {
content:"Alumni \A Association";
white-space: pre; /* or pre-wrap */
}
For reference: Link
The 'display' property controls whether the content is placed in a
block or inline box.
The following rule causes the string "Chapter: " to be generated
before each H1 element:
H1:before { content: "Chapter: "; display: inline; }
Authors may include newlines in the generated content by writing the
"\A" escape sequence in one of the strings after the 'content'
property. This inserted line break is still subject to the
'white-space' property. See "Strings" and "Characters and case" for
more information on the "\A" escape sequence.
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre" }
Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).
header h1:after {
content:"Alumni \A Association";
white-space: pre;
}
There is a "div" in my webpage that has fixed width and height.
Following css only works with single line text:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
How can I apply ellipsis on multiline text on the text inside that div using pure css with cross browser compatibility?
Try this example:
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
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;
http://codepen.io/martinwolf/pen/qlFdp
or go for dotdotdot.js
This workaround will require a wrapping element and has a small caveat of covering the very end of your text if it exactly fills your content box, but it works well enough in fluid situations until a better css property (like line-clamp) is widely implemented.
Works best with text-align:justified, but not necessary.
https://codepen.io/freer4/pen/prKLPy
html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}
.ellipsis{
overflow:hidden;
margin-bottom:1em;
position:relative;
}
.ellipsis:before {
content: "\02026";
position: absolute;
bottom: 0;
right:0;
width: 3em;
height:22px;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
z-index:2;
}
.ellipsis::after{
content:"";
position:relative;
display:block;
float:right;
background:#FFF;
width:3em;
height:22px;
margin-top:-22px;
z-index:3;
}
/*For testing*/
.ellipsis{
max-width:500px;
text-align:justified;
}
.ellipsis-3{
max-height:66px;
}
.ellipsis-5{
max-height:110px;
}
<div class="ellipsis ellipsis-3">
<p>Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
</div>
<div class="ellipsis ellipsis-3">
<p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>
</div>
<div class="ellipsis ellipsis-5">
<p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>
</div>
To bad CSS doesn't support cross-browser multiline clamping, only WebKit seems to be pushing it. Any other hacky solutions don't really seem worth it at the moment because even they have their own issues.
I know how you want pure CSS and probably have your own Javascript alternative options but you could try and use a simple Javascript ellipsis library like Ellipsity on github the source code is very clean and small so if you do need to make any additional changes it should be quite easy.
https://github.com/Xela101/Ellipsity
I'm really wanting a pure CSS solution to this too to speed things up and make everything look more pretty without the need of external dependencies.
var explorer = detectIE();
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
var firefox = navigator.userAgent.indexOf('Firefox') > -1;
if ((explorer) || (firefox)) {
var fontSize = $(".ellipsis-2").css('font-size');
var fontSize = parseInt(fontSize, 10);
var lineHeight = fontSize + 4;
var height = lineHeight * 2;
$(".ellipsis-2").css("line-height", lineHeight + "px");
$(".ellipsis-2").css("height", height);
$(".ellipsis-2").css({
"overflow": "hidden",
"position": "relative",
"word-break": "break-all"
});
var divheight = $(".ellipsis-2").height();
var lineheight = $(".ellipsis-2").css('line-height').replace("px", "");
var countline = Math.round(divheight / parseInt(lineheight));
// if you want to show 2 line
if (countline > 2) {
$(".ellipsis-2").addClass("dotted");
};
}
.ellipsis-2 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
position: relative;
}
.dotted:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis-2">Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
You could solve it using some after pseudo classes. As text-overflow: ellipsis doesn't render the same cross browser we are adding ellipsis using the content attribute that you can provide to the :after class. When we are setting white-space: nowrap to the p we need to add the div:after "hack" to ensure that the text is clipped where the padding sets in.
HTML:
<div>
<p>This is a text that clips to ellipsis because it is long</p>
<p>This is a text that clips to ellipsis because it is long</p>
</div>
CSS
div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}
p {
white-space: nowrap;
display: inline-block;
}
p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}
JSFiddle
Edit
I can see that I might have misread your question a bit. My code will fix Cross-browser ellipsis rendering but not for multi-line text. Check out this post for more answers on your specific topic: Limit text length to n lines using CSS: Stack Overflow
Is there a reason why the padding-top is not working for the tag? See http://jsfiddle.net/MMwdR/
<b>hello world</b>
b {
padding-top: 100px;
}
display it as a block.
display: block;
To add on to what was said, update your CSS to:
b {
display: block;
padding-top: 100px;
}
Otherwise the element is displayed as a part of the line, so you cannot add padding-top, etc.
http://forumgallery.rollinleonard.com/artists.php
I can't seem to get rid of the space before the comma in my list.
It makes no sense!
Here is the relevant part of my CSS
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.5em;
word-spacing: 1px;
}
li.artistlist:after {
content:", ";
}
.artistlist li:last-child:after {
content:"";
}
ul li{
margin:0;
}
I did a small demo with less CSS code that renders without a whitespace before the comma. Tested in Chrome and Firefox on Mac.
Looked at your updated page and found the problem with it. Read more about possible whitespace bugs within different browsers here: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html
Your html looks like this:
<li class="artistlist">
Davis Cone
</li>
Try to remove the whitespace between your tags and it renders fine:
<li class="artistlist">Davis Cone</li>
For special chars like space you should use Unicode in the content. Try this:
li.artistlist:after {
content:",\00a0";
}