伙计们,我正在尝试在网页中创建一个精美的描述,我希望每个段落的开头都是该段落的标题。但是我也希望其余的文字在标题结尾之后出现。我想实现以下目标:


  单行标题更多文本在这里
  还有这里,这里,这里和这里........
  ....
  
  最终会出现两行标题,这确实是looooooooooooooooooooooong,我需要更多的文本
  这里,这里,这里,这里,这里...
  ....


我将标题(具有不同样式)包装在SPAN元素中。简短的标题说明一切顺利。但是,当我需要两行时,第二行不会包装内容并延伸到宽度的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来表示标题?

@编辑
你说得对,我的朋友们。实际上,我对代码的输出感到非常困惑。但是阅读完您的答案后,我决定更仔细地检查这些元素。因此,我注意到'title'元素具有float: left CSS规则,这导致了此故障。所以我在float: none中添加了.title,现在一切正常。谢谢你们!

最佳答案

因此,您希望标题在它们之前像块元素一样表现,但在它们之后保持内联。

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

关于html - SPAN中的两行文字占据两行宽度的100%,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19708777/

10-09 01:06
查看更多