Newbie Q here: How can I add a linebreak in a custom header style?
h21
{
font-size: 1.52em;
/*Equivalent of a line break here...????*/
}
You cant add a linebreak in a class declaration, but you can add margin-bottom or padding-bottom: -10px or similar varieties. You can use firebug to measure how high a linebreak on your page appears and use that value for padding or margin -bottom.
h21 {
font-size:12.1px;
padding-bottom: 30px;
display: block;
}
you can use the word-wrap property. see here
an example:
h21 {
word-wrap: break-word;
}
obs: the container element should have a width
Related
I try to remove padding between two span elements which is not working, i did padding and margin set to 0px but didn't work
span {
padding: 0px;
margin: 0px;
}
somehow div container occupies some default padding which creates problem, someone can help to solve this issue
http://jsfiddle.net/f30boLhu/
here i want to remove black marked space between two texts
you can play with line-height or add a height to .bonus
.bonus {
font-size: 1.4em;
display: block;
height: 20px;
}
Try to add some style with existing code for your second span whose having promise class, See below CSS code -
Or try this JSFiddle
CSS Code-
.promise {
position: relative;
top: -10px;
}
Try to put span tags together like:
<span>one</span><span>two</span>
Without any separate between them
I want to show text file in browser with line-break. This is my code:
.readable {
font-size:16px;
line-height:32px;
font-family: league-gothic,sans-serif;
text-align:left;
word-break: break-word;
white-space: pre-line;
padding: 20px;
}
With word-break and white-space attribute, it can show break-line normally. However I want to stretch paragraph's line-height property. Example replacing \n with \n\n.
I dont want use javascript. Is there anyway that just use css only ?
Any help will be appreciated.
You can use :first-line attribute to increase the space between paragraphs. For example:
.readable::first-line {
line-height: 300%;
}
I want to modify the margin of paper-card elements, so I simply created a style html file. here's the relevant code:
paper-card {
max-width: 400px;
vertical-align: top;
margin: 10px;
--paper-card-header-color: var(--paper-pink-a200);
}
Both header color and vertical-align are being applied properly, but margin and max-width are being ignored (Chrome dev console says that these values have been overriden for some reason).
What am I doing wrong?
You need to use the --paper-card mixin to apply the style like below
.with-margin {
--paper-card:{
margin: 10px;
}
}
<paper-card class="with-margin"></paper-card>
Working jsbin: http://jsbin.com/xoxewe/edit?html,output
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1
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