The 'invisible' <br> element always appears at the end of the line you wrote it for.
With styling, you can give it a visual appearance. I want to make it appear at the start of the next line instead, so the visual appearance would indicate the start of that line.
abc<br style="border:1px solid"/>abc
would give
abc|
abc
but i want
abc
|abc
if you want to show tag before or after every paragraph for any purpose. you should use pseudo selectors.. like :before and :after
<html>
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
<css>
p:after{
content: "";
border-right: 1px solid red;
margin-left: 5px;
}
“indicate a selected character, including line breaks”
Line breaks are non-printed characters. Most software (e.g. MS Word) uses a replacement character to display line breaks. You should do the same to highlight any line-breaks.
Or you can wrap the line break into another tag which then is styled accordingly:
HTML
abc<mark class="line-break-wrapper"><br></mark>abc
CSS
.line-break-wrapper {
background: #990;
padding: 0 .25em;
}
you can simply use
abc<br/><span style="border-left:1px solid ">abc</span>
to achieve this
But i don't think this is the good method
I think giving border is more better see this http://jsfiddle.net/46jyt4d7/
<p>abc<br/></p><p class="a">abc</p>
.a{
border-left:1px solid;
}
You can't actually style a <br /> tag to become visible. But to achieve what you want to achieve all you have to do is put another element that creates the line like this:
abc<br /><span></span>abc
And with the styling:
span {
border: solid 1px black;
margin-right: 2px;
}
Here is an example fiddle:
http://jsfiddle.net/tmqk0ppe/
Related
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:
Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't
have them)
Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
The converter doesn't support images, so can't just use an image
I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.
Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?
PS: checkboxes need to be inline with the text.
You're on the right track.
Using HTML and CSS:
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="checkbox"></div> Unchecked<br><br>
<div class="checkbox checked"></div> Checked
The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).
The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block
Try this :
<div style="border: 1px solid black;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;">
</div>
https://jsfiddle.net/8rt4dqfc/
I'm trying to add text in this structure with pure css:
<div><i></i>world!</div>
so it would look like
<div><i></i>Hello, world!</div>
on the page.
The jsFiddle example contains this css style:
div{
border:1px solid red;
margin-top:20px;
margin-left:20px;
}
i {
display: inline-block;
width: 48px;
height: 48px;
background-image: url("http://png-.findicons.com/files/icons/1688/web_blog/48/pencil_small.png");
border:1px solid green;
}
My bad solution is to add:
i:after {
content: "Hello, ";
}
but it doesn't put the text "Hello, " where I actually want and the style from i applied.
So, is there any way to add Hello, right in front of another text with the same style?
Please only css solution.
Thank you.
P.S. And here is my bad solution # jsFiddle
It should be like this:
http://jsfiddle.net/RbLRA/2/
Is this how you want it? Your first fiddle doesn't help a lot - is the text meant to overlap the pencil image?
Anyway, you can style the pseudo-element itself to have the green border, and remove the browser default styling from the tags which is usually italic, using:
font-style: normal;
It's not considered semantic to use the tag either in this case, just a thought...
That's how cell selection looks in MS Excel:
Is it possible to have the similar border in regular HTML <table> so that the border overlaps near cells (if you look closely you'll see that the border is extended for about 1px each side over near cells)?
Yes, to a certain extent. I've only tested in Chrome, but this works: http://jsfiddle.net/q4Lcc/
td {
width: 120px;
height: 50px;
border: 1px solid gray;
}
td#test_td {
border: 3px solid black;
}
I don't know of a way to do it purely with tables, but one approach would be to use another div or text input that gets absolutely positioned over the table of data.
Here's a live example: http://jsbin.com/edehoc
I personally like this approach because it lets you use a familiar form element that has an expected style when it gains focus.
I have a centered div with a nested h1 inside. Is there any way to underline it with a thicker line than the html default?
This will give you control over the U tag's underline:
<style type="text/css">
u {
text-decoration: none;
border-bottom: 4px solid black;
}
</style>
In this case the underline will be four pixels.
No, there isn’t. The thickness of the underline is browser-dependent and cannot be affected in CSS (or HTML).
There was once a text-underline-width property suggested in the CSS3 Text draft. But there was insufficient interest in it, and it was removed from the draft in 2005. It was probably never implemented.
The usual workaround is to use a bottom border instead of an underline. However, note that it is a different thing. The bottom border is below the line box, whereas an underline is normally on the baseline of text and therefore cuts descenders of letters. Generally, a bottom border is better for legibility than an underline, but it deviates from typographic tradition.
The following example demonstrates the differences.
<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>
I am not recommending inline CSS but have used it here for brevity:
<h1 style="border-bottom: 5px solid black">
You may be able to achieve the same visual effect with border-bottom-width;
h2
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:15px;
}
Since you don't always want border-bottom (eg, item may have padding and it will appear too far away), this method works best:
h1:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want a thicker underline, add more height
If you want more or less space between the text and the underline, add a margin-top:
h1:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}