I have several different spans all wrapped up in a single div and I'm trying to add background color that wraps close to the text instead of a block (rectangle) around the span. So, I'm using inline, but this then puts all the spans on the same line. How can I get this background effect but putting getting line breaks in between the spans. Note that I can't change the HTML, but I have full control over CSS.
body {
background-color: red;
color: #fff
}
#page {
width: 800px;
}
.header-content {
width: 500px;
}
h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
display: inline;
background: #292d31;
box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
<body>
<div id="page">
<div class="header-content">
<h1 class="module_header">
This is the really long main title that can be many lines
</h1>
<span class="fullwidth_header_subhead">
Here is a subhead that can also be multiple lines so this can wrap also
</span>
<div class="header_content_wrapper">
<span>
Here is a shorter line but could be multiple lines
</span>
</div>
</div>
</div>
</body>
You can see the result here: https://codepen.io/jonmrich/pen/gdjBbK
One trick is to use the ::after pseudo-element to insert a line break character. You have to set white-space to pre in order for it to not collapse like other white space. The use of white-space: pre is credited to this answer by Adrift.
To add space between the lines, simply make the ::after pseudo-element display:block. That will add a line below the current line at the same font size as the element it is "after". Set the font-size property to equalize the height.
body {
background-color: red;
color: #fff
}
#page {
width: 800px;
}
.header-content {
width: 500px;
}
h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
display: inline;
background: #292d31;
box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
h1.module_header::after,
.fullwidth_header_subhead::after,
.header_content_wrapper::after {
content: '\0A';
white-space: pre;
display: block;
font-size: 10px;
}
<body>
<div id="page">
<div class="header-content">
<h1 class="module_header">
This is the really long main title that can be many lines
</h1>
<span class="fullwidth_header_subhead">
Here is a subhead that can also be multiple lines so this can wrap also
</span>
<div class="header_content_wrapper">
<span>
Here is a shorter line but could be multiple lines
</span>
</div>
</div>
</div>
</body>
Related
In my Angular project, I have a div with 3 child elements which are a span, an i element (icon) and a span with innerHTML attribute. Normally, all texts should be in the same line, but innerHtml code always starts with p and I can do nothing about it, so this causes a problem. Any suggestions?
This is my output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
This is desired output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span>This is an example text. This is an example text.</span>
</div>
<p> is a block element and you covered it by span(inline). Add style="display: inline;" to <p> element. Browsers automatically add a single blank line before and after each <p> element.
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p style="display: inline;">This is an example text. This is an example text.</p></span>
</div>
It's not clear what you mean by "innerHtml code always starts with p and I can do nothing about it."
If you entered this markup yourself, you can just omit the p tag.
If you are getting this html from a CMS or database, and you can do nothing about the p tag that's in there, then:
Your question maybe should include the binding, not just the output.
You can let the p tag exist, but add CSS to make it do nothing. In the snippet below, I replaced your inline styles with a CSS class "myDiv", and put in a rule to render the p tag useless.
.myDiv {
border: 1px solid #DDD;
padding: 3px;
width: 50%;
margin: 0 auto;
}
.myDiv span p {
display: inline;
}
<div class="myDiv">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
I've got multiple div elements nested in a div. What I want is for the #title-text div to be next to the image - in this case using a float.
The problem is that the text in the div spaces out the div when it has no more room in width as you can see in this jsFiddle.
I want to use floats because there will be multiple tiles using the same classes, and those tiles have different sizes and images etc. Also I don't want to have the #title-text to have a fixed width because of multiple tiles using it and thus having different widths.
Here's the HTML:
<div id="tile-wrapper">
<div id="category-text">
<p class="category-content">Smartphones / software</p>
</div>
<div id="tile-image">
<img src="images/wp10.jpg" class="tile-image" name="title" />
</div>
<div id="title-text">
Placeholder Text placeholder text placeholder text placeholder text
</div>
<div id="date-time-text">
<p class="date-time">3 minutes ago.</p>
</div>
</div>
Okay, so first I added display inline to your classes like this
.tile-image {
margin: 0 auto;
display:inline;
}
.title-text {
margin: 0 5px 5px 0px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
text-decoration: none;
font-size: 22px;
color: black;
display:inline;
}
then I put a width and alignment on #title-text
#title-text {
float: left;
margin-left: 5px;
margin-bottom:10px;
text-align:left;
width:50%;
}
I found the answer to my question with Jquery. Here's the solution if anyone wonders.
$(document).ready(function () {
var imageWidth = $('#tile-image').width();
var titleTextWidth = $('#title-text').width();
$('#title-text').width(imageWidth);
$('#tile-wrapper').width(imageWidth * 2 + 30); // +30 for margins.
});
I have a line of code which is styled using CSS. I wanted it to appear on a single line.
<style>
.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap;
}
.click {
font-style: oblique;
}
</style>
<h2 class="click">
Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged
</h2>
I have tried using the below code:
<h2 class="click">
Click a <span style="text-shadow:2px 2px #FF0000">thumbnail image</span> to see it enlarged
</h2>
It worked but I wanted to know is there any other way to perform this task?
<h3> is a block-level element. If you need to display it on the same line, you should change its default display type to inline or inline-block.
<h2 class="click">
Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged
</h2>
h3.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap; /* Is this really needed?? */
display: inline; /* Or inline-block */
}
Also note that, white-space is to handle the white space inside the element; Not around the element itself.
You can specify the display as inline:
<style>
.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap;
display: inline;
}
.click {
font-style: oblique;
}
</style>
<h2 class="click">Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged</h2>
However, note that h2 and h3 tags are designed for block-level header hierarchies. For something you want to display within the same line, span is usually more appropriate.
More info on the purpose of heading tags: http://accessibility.psu.edu/headingshtml
I want to put a line beside my text Like THIS
----- Hello WOrld -----
the line should be continued and BOLD and align side middle wise And RED
Have you tried :before and :after selectors?
<span class="dashes">Hello WOrld</span>
<style type="text/css">
.dashes { font-weight: bold; }
.dashes:before, .dashes:after { content:"----"; color:#f00; }
</style>
This is how it comes out: image sample
UPDATE
Based on your updates and comments, I think this fits your description:
<h4 class="sidelines"><span>Hello WOrld</span></h4>
<style type="text/css">
h4.sidelines { text-align: center; border-bottom: 1px solid #f00; height: 0.5em; }
h4.sidelines span { display: inline-block; background: #fff; padding:0 0.25em; }
</style>
This will give you a centered, bolded title with continuous lines on each side.
Here's an example of the update: http://o7.no/PVXvaH
No css required
─── Hello World ───
Looks like this
──── Hello World ────
try this. but not compatible for all browser versions.
p:before,p:after {
content: "---";
}
<p>Hello WOrld</p>
I achieved this using div's. check this link to see the result.
HTML
<div class="line"></div>
<div class="text">Hello WOrld</div>
<div class="line"></div>
CSS
.line
{
width:100px;background-color:black;
border: 0.1em solid black; /* dashed, groove, inset */
margin-top:0.45em;margin-bottom:0.45em;
}
.line, .text
{
float:left;
}
.text
{
padding-left:10px;padding-right:10px;
}
Remember that when you add the scales(height) of margin-top, margin-bottom and border, it should be equal to one. Like 0.45 + 0.45 + 0.1 = 1 in my example. This will keep layout clean.
If you want to make the lines more bold then just increase the scale of border keeping in mind about the scales of margin-top and margin-bottom.
Hello World
p {
text-align:center;
border-left: 50px solid #363454;
border-right: 50px solid #363454;
width:150px;
line-height: 2px;
}
<p>Hello World</p>
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)