CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

wrap text in floated situation (css)

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

Upvotes: 2

Views: 114

Answers (4)

Pbk1303
Pbk1303

Reputation: 3802

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;  
}

Upvotes: 1

C3roe
C3roe

Reputation: 96306

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/

Upvotes: 0

Gho
Gho

Reputation: 568

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

Upvotes: 2

alessandrio
alessandrio

Reputation: 4370

h3{
    white-space: nowrap;
    overflow: hidden;
}

Upvotes: 0

Related Questions