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

Posted 2023-03-05

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

【英文标题】：CSS: Place text at beginning of centered headline

【发布时间】：2015-02-11 15:16:22

【问题描述】：

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

在我有一个长标题之前，这非常有效。

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

有没有什么解决方案可以不用绝对定位文字？

说明： 我希望无论居中的标题有多长，短文本总是从标题的第一个字母开始。

【问题讨论】：

您是否要确保标题上方的短文本与标题的开头对齐？

是的，上面的短文本应该总是在标题文本的开头

问题似乎源于 h3 的父级 (.headline-container) 没有折叠到 h3 的宽度。至于为什么，我不是特别确定，但这可能会给你一些方向。

【参考方案1】：

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

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

[编辑]： 此外，如果您想让headline-companion 和标题相对于article 居中，但文本左对齐，则需要添加另一个元素...本案sub-headline-container.

.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;

<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>

【讨论】：

我添加了一个说明，我希望标题伴随文本始终位于标题的第一个字母。

这行得通，并且标题在换行后继续在右侧更好！