Question

我想控制文字的宽度。并且两者都是＆lt; hr＆gt;我希望根据文本中的文本宽度进行扩展和缩进。

现在，文字在屏幕上展开，我希望它能够适应菜单的宽度......但是当我处理网站的其他元素时，我需要灵活性。

下面是整个屏幕元素的css，它对我来说在所有页面上都很有用，如果这可以保持不变我会很喜欢 - 我害怕我的网站看起来像一堆边缘和边框 - 请参阅其余的代码笔

.outer {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  overflow: hidden;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

非常感谢!!

Answer 1

像

这样的东西

max-width: 80%;

应该这样做。

您也可以使用填充。例如：

{
padding-left: 10px;
padding-right: 10px;
}

Answer 2

为文本添加容器类，以便您可以轻松限制所有元素的宽度。当然你也可以只为你的身体增加宽度，但是像这样你仍然可以拥有超出宽度限制的元素。

这是我刚才解释的简单设置：

.container {
  width: 500px;
  margin: 0 auto;
}

<div class="container">
  <h2>Hello World</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <hr/>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

我的文字目前占据了我页面上的整个空间。我需要能够控制文本和图像占用的空间

2 个答案: