Span in h2 tag. Auto adjust width

Question

Here is the HTML part:

<div class="container">
    <h2>Some text<span></span></h2>
</div>

CSS for the elements:

.container {
width: 533px;
}

.container h2 {
color: #ec1c24;
font-size: 48px;
text-transform: uppercase;
font-family: "Open Sans Extrabold";
letter-spacing: -3px;
}

.container h2 span {
background: none repeat scroll 0 0 #ec1c24;
float: right;
height: 34px;
margin-top: 16px;
width: 38%;
}

What I'm trying to do is to make the span adjust it's size to the text lenght. With this CSS if the text is too long, the span goes below but it should just shrink.

Here's an example:

http://jsfiddle.net/SCj5Z/

Note : Your div class is `conatiner`, but in your **CSS** you use `.container` (notice the typo). — Vucko, Nov 07 '13 at 17:30
Uh, that's just a typo. I mean it's correct in the actual code. — user1410644, Nov 07 '13 at 17:32

Besat · Answer 1 · 2016-11-24T20:55:09.693

Using flex display you can achieve this. Container display should be flex and the span child attribute could be 1 (or basically any other number since we don't have any other flex child). with using flex we set the span size to fill the empty space and because h2 size is fix (which is size of the text) span will fill all empty space.

you can read more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this help..

HTML:

<div class="container">
    <h2>Some text<span></span></h2>
</div>

CSS:

.container {
     width: 533px;
}

.container h2 {
    display: flex;
    align-items: center;
}
.container h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 3px solid #2B3F4F;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 4px;
}

http://jsfiddle.net/besatzardosht/SCj5Z/75/

Please explain, what you did. – Abhishek Pandey Nov 24 '16 at 05:28 — Abhishek Pandey, Nov 24 '16 at 05:28

score 0 · Answer 2 · answered Nov 07 '13 at 17:32

0

I think display: inline-block will do the work correctly.

answered Nov 07 '13 at 17:32

Meowsome

99
1
10

score 0 · Answer 3 · answered Nov 07 '13 at 17:33

0

remove the width: 38% from the span's CSS and the width should just be auto and adjust automatically.

or display: inline-block and text-align: right the span

answered Nov 07 '13 at 17:33

Adrian Roworth

813
1
7
16

If I remove the width, it doesn't show at all since there is no text in it I guess. Your second solution doesn't help too. – user1410644 Nov 07 '13 at 17:36
give it a `min-width` – Adrian Roworth Nov 07 '13 at 17:37
I've added fiddle to my post. Hope you can take a look and test your solutions. – user1410644 Nov 07 '13 at 17:40
I wasn't fully understanding until your jsFiddle. Is this what your looking for? http://jsfiddle.net/SCj5Z/12/ – Adrian Roworth Nov 07 '13 at 17:47
Yes, but I have to use the current CSS structure. I mean I can't remove the span CSS. Plus the red line height should be 34 px. – user1410644 Nov 07 '13 at 17:54
It is impossible without altering the DOM. This is the only way to successfully do it cross-browser! http://jsfiddle.net/SCj5Z/31/ – Adrian Roworth Nov 07 '13 at 18:16

score 0 · Answer 4 · answered Nov 07 '13 at 17:52

adds three dots in the end of Some text. Not crossbrowser

       .container {                           
       width: 533px;                          
       }                                      

       .container h2 {                        
       color: #ec1c24;                        
       font-size: 48px;                       
       text-transform: uppercase;             
       overflow-x:hidden;                     
       white-space: nowrap;                   
       text-overflow: ellipsis;               
       font-family: "Open Sans Extrabold";    
       letter-spacing: -3px;                  
       }                                      

       .container h2 span {                   
       background: none repeat scroll 0 0 #ec1
       float: right;                          
       height: 34px;                          
       margin-top: 16px;                      
       width: 38%;                            
       }                                      


       <div class="container">                
           <h2>Some text<br><span></span></h2>
       </div>

Thank you, but I'm looking for crossbrowser solution. – user1410644 Nov 07 '13 at 17:54 — user1410644, Nov 07 '13 at 17:54
then `` is all that is possible
– el Dude Nov 07 '13 at 18:07 — el Dude, Nov 07 '13 at 18:07

score 0 · Answer 5 · edited May 23 '17 at 12:30

0

This questions sounds similar to this SO question:

Fluid width div relative to sibling

One of the answers links to the following JSFiddle:

http://jsfiddle.net/pQc3d/1/

If you can afford to manually set the background color of the actual h2 text and include   in the dummy span, the following fiddle might work for you:

http://jsfiddle.net/doubleswirve/3QFgk/

Hope that helps!

edited May 23 '17 at 12:30

Community

1
1

answered Nov 07 '13 at 18:06

doubleswirve

1,388
3
16
23

Span in h2 tag. Auto adjust width

5 Answers5