Question

所以小伙子们，我试图在我的网页上创建一个奇特的描述，我希望每个段落的第一个单词成为该段落的标题。但我还想在标题结束后立即发表其余文本。我希望实现这样的目标：

单行标题更多文字来到这里
  这里和这里，这里和这里........
  ....

一个双线标题最终会发生，这真的是looooooooooooooooooooooong，我需要这种行为更多文字来了   这里，这里，这里，这里和这里......
  ....

我在SPAN元素中包装标题（将具有不同的样式）。当谈到一个简短的标题时，一切顺利。但是当我需要它有2行时，第二行不会包含内容并拉伸到宽度的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来表示标题？

@EDIT 你是对的，我的朋友。我实际上对我的代码输出很困惑。但在阅读完答案后，我决定更仔细地检查这些元素。所以我注意到了这个标题＆＃39; element有float: left CSS规则导致此故障。所以我将float: none添加到.title，现在一切正常。谢谢大家！

Answer 1

所以你希望你的标题在它们之前的行为类似于块元素，但是要在它们之后保持内联。

解决方案＃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; 
}

Answer 2

p元素是一个块级元素，所以它会占用整行，如果你想要改变它，你需要为你希望50％宽度的<p></p>目标添加一个标识符并设置它在这里显示内联是一个jsfiddle是你想要的http://jsfiddle.net/fmG6D/

编辑您也可以使用display: inline-block;

SPAN中的双行文本在两行中占据100％的宽度

2 个答案:

解决方案＃1

标记

CSS

解决方案＃2

标记

CSS