html - SPAN 中的双行文本在两行中占据 100% 的宽度

Question

伙计们，我正在尝试在我的网页中创建一个奇特的描述，我希望每个段落的第一个词是该段落的标题。但我也希望文本的其余部分紧跟在标题结束之后。我想实现这样的目标:

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...
....

我将标题(将具有不同的样式)包装在 SPAN 元素中。当涉及到短标题时，一切都很顺利。但是当我需要它有 2 行时，第二行不会包裹内容并拉伸(stretch)到宽度的 100%，因为它是第一行的宽度。

每个标题我只使用一个 SPAN 元素。一切都在 P 元素中。看看这段代码

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

我还上传了这张图片让事情更清楚

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

你们知道如何解决这个问题吗？有没有办法只使用一个 SPAN 来表示标题？

@编辑 你是对的，我的 friend 们。我实际上对代码的输出感到非常困惑。但是在阅读了您的答案后，我决定更仔细地检查这些元素。所以我注意到“title”元素有一个 float: left CSS 规则导致了这个故障。所以我将 float: none 添加到 .title 并且现在一切正常。谢谢大家!

Answer 1

所以您希望您的标题在它们之前表现得像 block 元素，但在它们之后保持内联。

解决方案#1

将标题跨度包裹在一些向左浮动并清除的包装器中。

FIDDLE

标记

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

---

解决方案#2

FIDDLE

标记

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