In my HTML I have a <div>, and inside the <div> I need different vertical spacing between lines of text. I'm achieving this by using <br /> elements with a CSS class that corresponds to the amount of spacing I want.
For instance, for a 5px gap, I use a <br> with the height5 class:
<br /><br class="height5" />
Similarly, height2 and height10 and whatever exist for the same purpose.
The CSS classes are defined like so:
br.height2 {line-height:2px;}
br.height5 {line-height:5px;}
This is working in IE6+, FF2+, and Opera but for some reason there are huge gaps in Safari and Chrome (as if those two browsers are ignoring it and just applying regular breaks). I tried testing with larger line-heights like 20px or 30px and Safari and Chrome recognize those. They seem to be ignoring anything under 5-10 pixels.
Help? Thanks!
This worked on Chrome (the content attribute did the trick):
br {
content: " ";
display: block;
margin: 1em;
}
Those browsers might be reading your white space (carriage return, etc) and propping it open with a sort of value. I suggest using multiple div tags and style the divs with margin-bottom attributes of the space you want.
<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>
I know this is old, but my answer here is cross-browser without turning br into a block
/* line height can be set to whatever you want*/
br {line-height: 0.1; content: " "}
Try this:
br { line-height: 1em; }
or:
br { margin-top: 2em; }
This worked for me for both firefox and chrome. Got the idea from #SamuelC and #anushr.
br{
display: block;
line-height: 0.1;
content: " ";
}
Related
Is it possible to hide all letters after the first letter with CSS?
dt:not(::first-letter) {
display: none;
}
You can, but your CSS is wrong. The version below works (at least in Chrome). It makes the dt invisible, and defines an overrule for the first letter to make it visible again.
I tried the same with display too, but that doesn't work, as expected. visibility: hidden hides the content, but keeps the element in place, while display: none removes it from the flow, and makes it impossible for sub-elements (the first letter in this case) to become visible again.
I added a hover too, so you can hover the letter to see the rest of the dt.
dt {
visibility: hidden;
}
dt::first-letter {
visibility: visible;
}
/* Hover the first letter to see the rest */
dt:hover {
visibility: visible;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>
A side effect will be that the area that is covered by the text is still claimed. Maybe that is not an issue, but if it is you will need some other solution. One possibility is to make the font-size of the dt 0 too. That way, the text is so small that is claims no space. Won't help if it also contains images, of course.
Since it doesn't seem to work, here is the alternative using font-size. Less than ideal, but hopefully it will still solve your problem.
dt {
font-size: 0;
}
dt::first-letter {
font-size: 1rem;
}
/* Hover the first letter to see the rest */
dt:hover {
font-size: 1em;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>
I think you can try this:
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
<a class="twitter">Google</a>
</div>
See also this fiddle
You cannot use :not with pseudo element selector (see this).
What you can do is thinking in another way: transparent-ize the whole thing, then color with ::first-letter. Because the latter has higher specificity, it will override the transparent setting, thus achieve the result you want.
An alternative based on Waruna's answer, using color instead of layout-based attributes. Main advantage is that it works on every browser I tested (Firefox, Chrome and M$ Edge, but should probably work on all browsers), and it does not cause any visual glitches (like the "baseline jumping a pixel" from the second solution of the accepted answer), since it uses a completely visual attribute.
The issue with your original CSS is that you cannot use pseudo-elements (::blah) inside :not. You have to expand it into the inverse logic so you do not need the :not
dt {
color: transparent;
}
dt::first-letter {
color: black;
}
/* For testing */
dt:hover {
color: black;
}
<dt>Hello World!</dt>
a bit late to the party but i found this solutuùion that may help someone
width: 1ch;
overflow: hidden;
It may not work for every font but it should. It is perfect for monospace as ch is the size of the O letter in a font, so if your first two letters are shorter than O it will work fine, otherwise you may have to tweak it a bit.
Change the ch and you can have the first 2, 3, 4 .... letters :)
Try this....
.newline1::first-letter {
font-size: 200%;
color: #8A2BE2;
}
.newline2::first-letter {
/*color: transparent;*/
font-size: 0px;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>
.newline1::first-letter {
font-size: 200%;
color: #8A2BE2;
}
.newline2::first-letter {
color: transparent;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>
I've been trying to remove the line break that is caused by a break tag
I have come up with a solution that works in chrome, but not in firefox / IE11. Kind of curious if there is a CSS only solution that I could use in this situation that would work across most modern browsers:
HTML
<p>This line breaks in firefox,<br> but not chrome</p>
CSS
br {
display: inline-block;
content: " ";
width: 7px;
}
JSFiddle
Edit:
The break tag also needs to act like a space between the two words.
Using the following markup works cross browsers:
HTML
<div class="test">WORD<br> WITH<br> SPACE</div>
<div class="">WORD <br>WITH <br>SPACE</div>
CSS:
.test br{
display: none;
}
Use case is if you want to have a tag at a certain media query while still retaining spaces between the letters.
JSFIDDLE
I tried a few CSS methods and none of them are working in Firefox. I would suggest using a little bit of JavaScript to help you out.
Using jQuery, or just plain JS, insert a spacer element after each <br>
$('br').after('<span class="spacer"></span>');
The CSS:
br { display: none; }
.spacer { content: "\00a0"; }
i'm looking for a solution to replace a line break <br>
with a character, let's say a comma.
i'm having a website that displays credits to images.
in landscape mode credits are displayed like this:
title
artist
year
in portrait mode it should be displayed like this:
title, artist, year
so far i found this solution, works in safari, safari for ios and chrome (haven't tested chrome on android but i guess it should work too):
first set an empty content to remove the line break
br {content: '';}
then set the string you want the line break to be replaced with
br:after {content: ', ';)
if you need the line break to work normally again put
br {content:none;}
works great actually but is it the right way to do this?
how would you replace a line break with a character in css?
i'm looking for a solution in which the end user of the cms doesn't have to add too much html code when entering the credits.
Self-closing tags (eg. <br>, <img>, <input>, etc) can't have generated content. These are replaced elements.
For more information on replaced elements, see this article:http://www.red-team-design.com/css-generated-content-replaced-elements
/* cross browser inline-block */
p br {
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
/* replace <br> with comma */
p br {
content: '';
width: 9px;
height: 18px;
}
p br:before {
content: ', '
}
<p>some<br />text with <br></p>
works in mobile Chrome 40.0.2214.89, Chrome 40.0.2214.95, Opera 12.16, Safari 7.0.4
not work in Firefox 35.0.1 and Internet Explorer 11
I want to vertically center the text entered in input text boxes on the page.
Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.
However; on iOS 5, Safari displays the typed text vertically centered... But the placeholder text and the cursor appear top aligned.
.txtBox {
line-height: 3em;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
Anyone else facing this issue?
For me there is only one solution that appears close to perfect in all browsers I tested (Chrome, FF, Safari (+iOS), IE10):
line-height: normal;
Solutions like line-height: 100% and line-height: 1; seem to be aligned towards the top of the input, especially in Chrome.
http://jsfiddle.net/5Vc3z/
Comparison:
http://jsfiddle.net/5Vc3z/1/
Setting line-height: 1; seems to fix this.
You should use percentage for the line-height.
.txtBox {
line-height: 100%;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
Assuming you are just trying to make the input field appear larger then you could use padding:
.txtBox {
font-size: 1em;
padding: 1em auto;
}
Also, your input field should be:
<input type="text" class="txtBox" placeholder="Name" />
Edit
Sorry, took a little while. It appears that placeholder can be styled individually and / or inherit styles from the parent. Unfortunately there are quite a lot of styles that are not supported by Safari at this time.
The following blog has details about the styling techniques and which are / are not supported within certain browsers:
http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
I got stuck on this issue for a long time despite using
input::-webkit-input-placeholder {
line-height:normal!important;
}
It turns out the having a line-height in the input element by itself was breaking my input::webkit-input-placeholder line-height.
Solution extended:
I removed the line-height in my input style and it fixed my issue.
I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text.
Is there a way to make this work?
It's internal for IE8 so browser issues aren't a problem. If I do
<span class="linebreakclass">cats are</span> brilliant
I want "brilliant" to appear on a new line.
You won't be able to render HTML tags but you can set style like this:
.needs-space:after {
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
The main setting here is display: block; This will render :after content inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.
You can use \A escape sequence, which will render as a newline:
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
This method was mentioned in the CCS 2.1 Specification for the content property:
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.
It gets worse - the :after class doesn't even work in IE6 (and probably some other browsers too).
I think what you really want here is a margin on the bottom of the element, to provide spacing.
Simply
.myElement {
margin-bottom: 1em;
}
You can either add a custom icon from your assets, by doing simply ..
&:after {
content: url('~content/icons/drop-down-arrow.png');
}