0

所以伙计们，我正在尝试在我的网页中创建一个精美的描述，我希望每个段落的第一个单词成为该段落的标题。但我也希望文本的其余部分紧跟在标题结尾之后。我想实现这样的目标：

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

最终会出现两行标题，这真的是 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 你是对的，我的朋友们。实际上，我对代码的输出感到非常困惑。但是在阅读了您的答案后，我决定更仔细地检查这些元素。所以我注意到'title'元素有一个float: left导致这个故障的CSS规则。所以我添加float: none了.title，现在一切正常。谢谢你们！

4

2 回答 2

4

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

解决方案#1

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

小提琴

标记

 <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

小提琴

标记

 <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; 
}
于 2013-10-31T14:30:37.400 回答
2

p 元素是块级元素，因此它将占据整行，如果您想要更改，您需要向<p></p>您想要 50% 宽度的目标添加一个标识符并将其设置为显示内联这是一个 jsfiddle这就是你想要的http://jsfiddle.net/fmG6D/

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

于 2013-10-31T14:19:39.953 回答