CSS：将文本放在居中标题的开头

Question

我想在中心标题的开头放置一个短文本。 我目前的解决方案是在标题周围设置一个内嵌显示的容器 并将文本右侧和显示块放置。

在我有一个很长的标题之前，这很有效。

HTML：

<div class="article">
  <div class="headline-container">
    <span class="headline-companion">FooBar</span>
    <h3>Sample Headline</h3>
  </div>  
</div>

SCSS：

.article{
  display:block;
  width: 700px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}

.headline-container{
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  position: relative;

  h3{
    font-size: 40px;
    margin: 0;
    padding: 0;
    display: inline; 
  }

  .headline-companion{
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
  }
}

http://codepen.io/anon/pen/PwNJGy

有没有解决方案，我不必用绝对文本定位文本？

澄清： 无论中心标题有多长，我希望短文本始终位于标题的第一个字母。

Answer 1

如果您将<h3>标记包装在另一个元素中并设置max-width值，并指定word-wrap.，则可以完成您想要做的事情（我认为） p>

这允许您更改父div的宽度或标题文本的长度，而不会对整体格式产生非常不利的影响：

[编辑]：此外，如果您希望headline-companion和标题以article为中心但使用左对齐文字，则需要添加其他元素......在这种情况下sub-headline-container.

＆＃13;

＆＃13;

.article {
  display: block;
  width: 800px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}
.headline-container {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.headline-wrap {
  word-wrap: break-word;
  max-width: 800px;
  text-align: left;
}
.headline-companion {
  margin: 0;
  padding: 0;
  display: block;
  text-align: left;
}

＆＃13;

<div class="article">
  <div class="headline-container">
    <div class="sub-headline-container">

      <span class="headline-companion">FooBar</span>

      <div class="headline-wrap">
        <h3>
        Sample Headline
      </h3>
      </div>

    </div>

  </div>
</div>


<div class="article">
  <div class="headline-container">
    <div class="sub-headline-container">

      <span class="headline-companion">FooBar</span>

      <div class="headline-wrap">
        <h3>
       SUUUUUUPPPPERRRRRRRR BIG HEADLINE!!! ------------------------------- --------------
      </h3>
      </div>

    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;