I have the following code
HTML:
<div>
<h3> Lorem ...</h3>
<a>some link</a>
</div>
CSS:
a {
float: left;
}
h3 {
display: inline-block;
}
If there is enough horizontal space both elements sit nicely next to each other, but if not enough space, the anchor is pushed down (not what I want) I would like to see the h3 element's text wrap instead. Furthermore, the text inside the elements can be anything, meaning that their width is variable. Any suggestions ?
JSFIDDLE
either
h3{
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
or give them widths
h3{
width:50%;
}
a{
width:50%;
}
or whichever values u want so that they won't get out of their boundries
I don't exactly understand how you want the output to be, i've given two outputs below.
1) <h3> and <a> tag side by side without width:
You can use display:table property which requires no width
DEMO
CSS:
div
{
display:table;
}
a {
display:table-cell;
}
h3 {
display: table-cell;
}
2) <a> tag continuing with the text in the <h3> tag:
You can use display:inline
DEMO
CSS:
a {
display:inline;
}
h3{
display:inline;
}
float doesn’t work this way on elements higher up in the DOM tree. (The only reason that the link did not get pushed down under the text content of the h3 to begin with was that you did display the latter as inline-block.)
If you can place your link before the h3, then it’s easy (you just have to remove inline-block form the h3 as well) – http://jsfiddle.net/ygnbgL7k/9/
EDIT:
[ from comment]: but the only problem with that solution is that the wrapped text starts at the beginning of the next line (under the floated anchor).
If you don’t want that, add
h3 { overflow:hidden; }
http://jsfiddle.net/ygnbgL7k/15/
h3{
white-space: nowrap;
overflow: hidden;
}
Related
I want to create a span with a fixed width that when I type any thing in the span like <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, a long string of non-spaced text, the word(s) break or wrap to next line.
Any ideas?
You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.
span {
display:block;
width:150px;
word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
Try following css with addition of white-space:
span {
display: block;
word-wrap:break-word;
width: 50px;
white-space: normal;
}
Like this
DEMO
li span{
display:block;
width:50px;
word-break:break-all;
}
By default a span is an inline element... so that's not the default behavior.
You can make the span behave that way by adding display: block; to your CSS.
span {
display: block;
width: 100px;
}
Try this
span {
display: block;
width: 150px;
}
Just to extend the pratical scope of the question and as an appendix to the given answers:
Sometimes one might find it necessary to specify the selectors a little bit more.
By defining the the full span as display:inline-block you might have a hard time displaying images.
Therefore I prefer to define a span like so:
span {
display:block;
width:150px;
word-wrap:break-word;
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
display:inline-block;
}
img{
display:block;
}
In my case, display: block was breaking the design as intended.
The max-width property just saved me.
and for styling, you can use text-overflow: ellipsis as well.
my code was
max-width: 255px
overflow:hidden
I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
I have my HTML structure as follows:
<div id="id1">
<h1>my name </h1><h3>myemailid#xyz.com</h3>
</div>
The code automatically brings the <h3> on the next line. However, I want it next to <h1> without any line-change.
CSS:
#id1{
width: 900px;
padding: 30px;
background: #FFF;
text-align:center;
}
#id1 h3{
font-family:Arial;
white-space:nowrap
}
How can I modify to achieve my desired result?
You could use more semantic markup or simply modify the elements with CSS:
#id1 h1, #id1 h3 { display: inline; }
HTML headings behaviours with display: block by default. So they won't share same line with any other relative element.
Set their display to inline-block, and they will render one after the other, just as you expect.
I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;
Consider the following example: (live demo)
HTML:
<div>
<p>
<strong>Stack</strong>
<span>Overflow</span>
</p>
</div>
CSS:
p {
background-color: #aaa;
}
span {
background-color: #777;
}
How could I make <span>'s width to be all the available space?
Note: <strong> and <span> should be on the same line.
If you want the items on the same line with the full width taken up you could do this.
http://jsfiddle.net/Sohnee/Gfyjc/
p {
background-color: #aaa;
}
strong {
float: left;
}
span {
display: block;
background-color: #777;
margin-left: 40px;
}
But a better alternative would be to get the background-color run from the parent element.
If you don't need the span to actually be that wide, only have it look like it is, you can simply give the <p> the background colour of the <span> in your example, and the <strong> the background colour of the <p>.
p {
background-color: #777;
}
p strong {
background-color: #aaa;
}
See this example.
This only works correctly as long as the <p> has a padding of zero, though. Otherwise, you'll need the solution with the float.
Use display: inline-block to have possibility to set size and keep element positioned as inline elements. Mathias example changed to use inline-block: http://jsfiddle.net/gXDjZ/7/
span is basically an inline element
making it a block element using display:block; will add a \n before n after the element
so making it a block will take the span to the next line and you can float:left; on its sibling and bring it back to the same line
something like this
strong{
background-color: #aaa;
float:left;
}
span {
display: block;
background-color: #777;
}
you can also use padding-right:__px; in span
so that it takes up the adjacent spaces
span{ padding-right:433px; }
http://jsfiddle.net/gXDjZ/15/