Question

想知道如何使居中文本的宽度成为文本的宽度？以红色突出显示，宽度为100％。

http://jsfiddle.net/kenhimself/ktkdypyo/

CSS：

h1 {
    text-align: center;
    font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
    background:red;
    color:white;
}

提前致谢！

Answer 1

更改您的HTML结构，如下所示，并为h2应用样式。

  <div style="text-align:center"><h1>text is centered</h1><br />
   <h1>but the width is 100%.</h1><br/>
   <h1>How can I make it so that the width</h1><br />
   <h1>is only the widht of the text?</h1>
  </div>

CSS

h1 {
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;    
display:inline-block;
}

DEMO

Answer 2

http://jsfiddle.net/ktkdypyo/2/你可以在h1标签内添加span，然后只给红色跨越

html, body {
    width:100%;
    height:100%;
    font-size:100%;
    font-family:helvetica;
    font-weight:normal;
    font-style:normal;
}
h1 {
    text-align: center;


}
span{
  font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
    background:red;
    color:white;   
}


<h1><span>text is centered<span></h1>
<h1><span>but the width is 100%.<span></h1>
<br/>
<br/>
<h1><span>How can I make it so that the width</span></h1>
<h1><span>is only the widht of the text?<span></h1>

你在评论中的另一个问题我怎样才能做到这一点，当我将鼠标悬停在任何这些文本上时，它会淡出并被其他文本替换？ 这是一个工作小提琴：http://jsfiddle.net/u7tYE/5060/

Answer 3

您需要将文本换行并在span中应用背景颜色而不是h1。您不能使用相同的元素，因为它们是块级元素。您需要在块元素中放置一个inline-block元素以获得所需的结果。

例如

<h1><span>this is the entered text</span></h1>

CSS

span {
    background: red;
}

Answer 4

问题已经回答，但已添加

margin: 0 auto;
display: table;

到css可以在不更改标记的情况下完成工作。我已经对它进行了测试，例如，Chrome，Mozilla和Opera，似乎没问题。

如何使中心对齐的文本只是文本的宽度？

4 个答案: