伙计们,我正在尝试在网页中创建一个精美的描述,我希望每个段落的开头都是该段落的标题。但是我也希望其余的文字在标题结尾之后出现。我想实现以下目标:
单行标题更多文本在这里
还有这里,这里,这里和这里........
....
最终会出现两行标题,这确实是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/