CODEWITHSUNDEEP
htmlcss
Victor Ferreira
Victor Ferreira

Reputation: 6449

Two-line text in SPAN taking 100% of width in both lines

So guys, I'm trying to create a fancy description in my webpage and I want the first words of each paragraph to be the title of that paragraph. But I also want to the rest of the text to come right after the end of the title. I want to achieve something like this:

A Single Line Title more text come here
and here and here and here and here........
....

A Two Line Title Will Eventually Happen And This is Really looooooooooooooooooooooong and I need this behavior more text come
here and here and here and here and here...
....

I'm wrapping the title (that will have different style) in a SPAN element. Everything goes well when it comes to a short title. But when I need it to have 2 lines, the second line does not wrap the content and stretch to 100% of the width, because it is the first line width.

I'm using only one SPAN element per title. And everything is inside a P element. Have a look in this piece of code

HTML

 <div class='column'>
        <p><span class='title'>Short title comes here</span>  text ... ... ... ... ... ... ... ... ... ...</p>
        <p><span class='title'>A longer title come here and goes on and on and on and on and on</span> text ... ... ... ... ... ... ... ... ... ... </p>
    </div>

CSS

.column p .title{
font-weight: bold;
display: inline;
font-size: 15pt;
color: rgb(0,0,0);
line-height: 14pt;
margin-right: 5px;}

And also I uploaded this image to make things clearer

https://docs.google.com/a/uniriotec.br/file/d/0B2abPynX9PhkYzRydGJQT2JlbHM/edit?usp=drive_web

Do you guys have any good idea how to solve this problem? Is there a way to use only one SPAN to represent the title?

@EDIT You are right, my friends. I actually was very confused with the output of my code. But after reading your answers I decided to inspect that elements more carefully. So I noticed that the 'title' element has a float: left CSS rule that was resulting in this malfunction. So I added float: none to .title and everything works fine now. Thank you all!

Upvotes: 0

Views: 18710

Answers (2)

Danield
Danield

Reputation: 125423

So you want your titles to behave like a block element before them, however to remain inline after them.

Solution #1

Wrap the title spans within some wrapper which is floated left and cleared.

FIDDLE

Markup

 <div class='column'>
     <span class="wpr"><span class='title'>Short title comes here</span>  text ... ... ... ... ... ... ... ... ... ...</span>
     <span class="wpr"><span class='title'>A longer title come here and goes on and on and on and on and on</span> text ... ... ... ... ... ... ... ... ... ...</span>
</div>

CSS

.title
{
    font-weight: bold;
}
.wpr
{
    float:left;
    clear:both;
}

Solution #2

FIDDLE

Markup

 <div class='column'>
     <span class='title'>Short title comes here</span>  text ... ... ... ... ... ... ... ... ... ...
     <span class='title'>A longer title come here and goes on and on and on and on and on</span> text ... ... ... ... ... ... ... ... ... ...
</div>

CSS

span
{
    font-weight: bold;
    inline-block;
}
span:before 
{ 
    content:"\A"; white-space:pre; 
}

Upvotes: 4

user2578173
user2578173

Reputation:

the p element is a block level element so it will take up the whole row, if you want that changed you would need to add an identifier to the the <p></p> target you want the 50% width and set it to display inline here is a jsfiddle is this what you wanted http://jsfiddle.net/fmG6D/

Edit you could also use display: inline-block;

Upvotes: 2

Related Questions