How can I do this using CSS and HTML?
Bordered text surrounded by colored border
Bordered text's border minimally surrounds text
Bordered text has maximum width
Bordered text's border doesn't overlap neighboring elements
When rendered, it should look something like this:
For the border I'm using:
padding: 1.0em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;
If I apply the CSS to a <p>, then the border is as wide as the browser window. I want the border to only be as wide as the text (variable depending on the text size), so setting an absolute width using width doesn't work. I tried display:inline but that causes spacing issues with neighboring elements. I also tried applying the above CSS to a <span> contained within a <p>, but that doesn't work when the text is too long and wraps.
Have you tried experimenting with the CSS property called float? Specifying float: left causes the width of the containing element to adjust to the text - seems like a secondary effect but it works.
If you don't want the containing elements lining up, you can add <br /> tags or you can add "clear: both;" to the style.
I definitely think it's achievable - you just need to find the right combination of attributes/values.
You can get the highlighted paragraphs to minimally surround the text by making the highlighted paragraphs float left as block elements (<p> is by default). Then, get the paragraphs to clear:left to prevent them from stacking up horizontally.
The CSS:
.pars {
/* this is used to prevent the last floating element
from causing issues below the paragraph (.pars) container */
width: 100%;
overflow: visible;
}
.pars p {
clear: left;
margin: 0 0 0.5em 0;
}
.pars .highlighted {
float: left;
padding: 1.0em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;
}
Your HTML:
<div class="pars">
<p>Some paragraph text</p>
<p class="highlighted">Some bordered text</p>
<p class="highlighted">Some more bordered text</p>
<p>Some very long bordered text blah blah blah
blah blah blah blah blah blah blah blah blah blah</p>
</div>
Just add
p.highlighted {
float: left;
}
p {
clear: both;
}
This will cause the highlighted paragraphs to only be as wide as required by their text, and will ensure that existing paragraphs never overlap horizontally with the highlighted ones.
sounds like a table to me... oh, I can see the comments and down votes coming already. "tables are only for tabular data"... Yeah, I know but they are also a qnd way of doing exactly what steve wants to do.
what about display:inline-block?
Related
There is section inside which i have defined text-align as left for a line but its not taking effect for some reason
<section id="topic1">
This is a centered Heading for Topic 1<br>
<span class="text">This is a left aligned line</span>
</section>
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: inline-block;
text-align: left;
}
I tried display: block for text span tag in above code and text got aligned to left but i am looking for a alternative way to do this
Reason for finding alternative way - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the space between each span tag for some reason
Practical example below
<span class="text">This is line 1</span><br>
<span class="text">This is line 2</span>
.text {
display: block;
}
If you check output of above code there would be space between line 1 and 2 because of display block .
I am okay with using display : block to make text align work for span tag
But then this unnecessary space created by block display bothers me
Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display
An inline-blockelement is only as wide as its contents, in your case NOT the full width of the container.
In their container inline-blocks are aligned according to the text-align setting of the parent element (= the container, in your case #topic1), thats why they are called INLINE-blocks.
So if you want it left-aligned, you have to change the alignment of section to left. And wrap your to be centered text in a heading element (like <h1>...</h1>, wich is a block element having 100% width by default) to which you apply text-align: center. And BTW, that would also improve the semantical quality of the HTML - headers should be wrapped in header tags.
About "unneccessary vertical space between lines": That the default margin-top and margin-bottom of these elements - you can reduce those by defining them in the CSS for the according elements)
You can do something like this using margin. This will allow you to adjust the spacing between the blocks. Also, you can remove the br tags.
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: block;
text-align: left;
margin: 10px 0;
/* CHANGE THIS VALUE */
}
<section id="topic1">
This is a centered Heading for Topic 1
<span class="text">This is line 1</span>
<span class="text">This is line 2</span>
</section>
You have a space after the period.
To select class="text", use:
.text
not
. text
Try adding float: left instead of text-align:left. As span element or inline-block element take only fit width. float will help align the item with respect to parent.
https://codepen.io/pratik-sangami/pen/dybKMVz
I have a very normal div and inside I have some text. the div is styles with test-align:center;and have a fixed width of 360px. The problem is when I try and enter some text without any spaces between words, the whole document would not break and commit to the div's width, it would just get out of the div's width I set it.
I know that in a real life situation no one would write a document without any spaces between words, but I just want to achieve this.
HTML
<div class="wrapper">SomeDummyTextWithNoSpaceInBetwenn</div>
CSS
width:350px;
display: block;
margin: 10px;
text-align: center;
You can style the way text wraps inside a div with CSS using word-wrap:breakword
div{ width:360px; background:#555; color:#eee }
#withWordWrap{ word-wrap:break-word }
<div id="withoutWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
<br><br>
<div id="withWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
You can use word-wrap: break-word;
Can anyone explain the behaviour of the divs here http://jsfiddle.net/Z7z5Q/ ? I wonder, why they are not aligned on one line ? And why adding text to div moves other divs ?
Here is html and css:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend">Some text in more than two line, actually in 3</div>
<div class="family">Some text in two line</div>
<div class="friend" id="best_friend"></div>
<div class="enemy" id="archnemesis"></div>
<div class="friend">Some text</div>
<div class="family"></div>
<div class="friend"></div>
<div class="family"></div>
</body>
</html>
Css:
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
#best_friend {
border:4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
Thanks. Will appreciate links to docs or articles.
The elements are aligned... but not in the way you intended it, obviously ;)
The key to your problem is the property vertical-align.
First remove border-radius in order to better see the boxes.
Then add vertical-align: middle;: problem solved (see fiddle)
Content or not, each box is now aligned relatively to its fixed height (you fixed it to 100px).
What happened in the first place without vertical-align: middle;? Change the value for baseline: you're back to the original problem. This is the default value, the one you do want when displaying text in spans for example or a label and the text of a text field, whatever the padding and margin on both. But with text forced to occupy 2 or 3 lines (boxes are 100px wide whatever their content), the baseline is very different from what you'd expect, it's the baseline of the content aka the last line of text.
Same with empty div: as they lack content to align with, their baseline is their bottom side (not so sure about this one, but that's what seems to happen).
Add a single character or a non-breakable space in some empty div: their baseline is now completely different from an empty div. See other fiddle
The same phenomenon happens with a tall image lost in a paragraph of text; you can align it with vertical-align but the difference is that it's easier to see what's happening. Here you haven't a single occurence of "normal" text so spotting it is a bit harder.
Why float: left; does work here? It'll take each box, all of the same height, and align it relative to the box, not to its content. But then you've to manage clearing and 1px more on a box can break the alignment of all the following boxes...
inline-block is an attribute with a number of curiosities. In this example, you can plainly see that removing height: 100px from the div CSS rules will result in the elements having their text aligned, which isn't so obvious with the flashy circle-shaped dashed multicolored borders. So to fix this, you would apply vertical-align: top. (source)
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
(from a great answer from another thread)
In comparison, floats align at the top by default.
align on one line
div {vertical-align: middle;}
Adding a float:left; will solve this problem see here: http://jsfiddle.net/Z7z5Q/5/
Also adding vertical-align:top; will solve it as well: http://jsfiddle.net/Z7z5Q/7/
This is because inline-block behaves weird with white spaces in html.
I'm messing around with everyone's favorite CSS topic, vertical alignment. I found a little case that makes no sense to me, which probably means I'm failing to understand something about CSS.
I have the following HTML (it's for exploration code, so please excuse the inline styles):
<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
<span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; display:inline-block;"> </span>
<span>Some text</span>
</div>
This displays a blue box and some text, both vertically centered. But if I replace the with a regular space character, the text in the other span is no longer centered. I created a JSFiddle that demonstrates this.
My question is - why does changing from an to a space character in the first span change the vertical alignment of the second span?
You are confused how the vertical-align property works. It doesn't apply to block-level elements. When it is set on a non-table-cell and non-inline element, the property is actually applied to all the inline text inside that element, not to the element itself.
When you use a regular space, the space isn't actually "rendered" by the browser because it's not really content. Therefore, the entire box becomes the line of text (since you're displaying it as inline-block) and the baseline is set at the very bottom of the parent against the black border at the bottom, which is why the text appears way down there.
When you use a non-breaking space, the space is content and does get render, which moves the baseline for the text up to where the text would actually appear inside the blue box. It's not actually centering the text. It's nowhere near centered on my screen. The baseline has just moved based on the content. You'll notice from this example that it also changes the line-height of the continuing text.
An easy way to fix this is to float the blue box to the left and then manually set a line-height for the rest of the text to follow. See the jsFiddle.
<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
<span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; float: left;"></span>
<span>Some text that continues on and on and on sothat you can see what is actually happening here blah blah blah blah blah</span>
</div>
The entity stands for non breaking space and is a variant of the space char.
They aren't the same.
In fact the entity prevents an automatic line break
Read more about at wikipedia
Moreover, the white space result as an "empty" span and that will cause that "bad behaviour"
May help?:
http://jsfiddle.net/mFryV/18/
Using HTML and CSS.
I have text surrounded by a border using display:inline to make the border just larger than the text. The problem is that the border overlaps certain surrounding block-level elements. It overlaps <table> and <form>, but not <p>.
CSS:
.bordered {
padding: 0.6em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;
display: inline;
}
HTML:
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<table><tr><td>Table text</td></tr></table>
Result:
Why is this? And why is it inconsistent between different block-level elements? I would expect that the table cell text be vertically aligned the same as the paragraph's.
Follow up: The whole reason why I have display:inline is so that the border is only as wide as the text. If using display:block (the default for <p>) then the border is as wide as the parent element.
The P tag isn't a vanilla block level element. Its default state in most user agents specifies some top and bottom margins. The TABLE tag doesn't. So the P tag is pushing the inline DIVs farther apart.
margins on P tag http://homepage.mac.com/estranged/images/css01.png
margins on TABLE tag http://homepage.mac.com/estranged/images/css02.png
It is doing the block level elements the way you expect. None of the block-level elements are overlapping.
But the bordered text is not a block level element because you made it an inline box. If you put the bordered text inside the <p>, or inside it's own <p>, or get rid of the display: inline, then you will get a box-level layout as you expected.
Update: yet another way to fix this would be to put the stuff above the table inside a div (that isn't inline) and then style that div with identical but transparent margins and padding.
.blockMargin {
padding-bottom: 0.6em;
border-width: 2px;
border-color: transparent;
}