Question

我正在使用WordPress Ultimatum主题，并尝试设置内部页面布局页面标题的内容。

标题作为H1放置在页面中，文本内容直接位于内部，其余页面内容直接在div中显示：

<article>
    <h1>Title</h1>
    <div class="entry-content" >
        <div class="row" >
            <div class="wrapper" >
                <p>Some Text</p>
            </div>
        </div>
    </div>
</article>

我想将页面限制为最大宽度，我可以对所有页面内容进行限制，但我不能使用H1，因为它只是元素中的文本内容。

基本上，使用与上面类似的HTML，我希望我的页面看起来像：

......但它看起来像是：

...来代替。

有没有办法可以强制H1中的文本以特定宽度换行（并将H1中的文本块居中），而无需编辑HTML（即没有H1中的任何子元素？也许这可以通过定位伪元素来完成？我宁愿不在媒体查询中制作一堆填充规则。

Here is a JSFiddle!

谢谢！

Answer 1

您需要定义左右填充：

h1 {
    width:100%;
    padding: 40px calc(50% - 300px);
    margin:0;
    text-align:center;
    background-color:#337ab7;
}

左右填充的值为calc(50% - 300px)。当600px小于100％时，它使文本宽度始终 600px ，或者当屏幕宽度小于600px时，文本宽度始终为100％。

https://jsfiddle.net/8u0rtb81/

Answer 2

您可以从标题中取消width: 100%并将padding-left和padding-right设置为某些值，例如

padding-left: 15%;
padding-right: 15%;

Answer 3

我的理解是，您希望在width上设置<h1>，并且还希望在该宽度之外显示background条。从技术上讲，如果不引入新标签，就不可能做到这一点。但是，有一些解决方法可以达到类似的效果。

出于演示目的，我将它们设置为不同的背景颜色。

使用框阴影

＆＃13;

body {margin: 0;}
h1 {
  background-color: silver;
  box-shadow: 0 -9999px 0 9999px grey;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

＆＃13;

<h1>The quick brown fox jumps over the lazy dog</h1>

＆＃13;

使用伪元素

＆＃13;

body {margin: 0;}
.container {
  overflow: hidden;
}
h1 {
  background: silver;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
h1:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -9999px;
  right: -9999px;
  top: 0;
  bottom: 0;
  background: grey;
}

＆＃13;

<div class="container">
  <h1>The quick brown fox jumps over the lazy dog</h1>
</div>

＆＃13;

在特定宽度和全宽背景下包装文本

3 个答案: