br不输出换行HTML [重复]答案

【问题标题】：br not outputting a line break HTML [duplicate]br不输出换行HTML [重复]
【发布时间】：2023-03-17 11:51:01
【问题描述】：

我想在我的 .center 区域中垂直显示文本。但是，我似乎无法使用断线。我也尝试将<?php echo "<br>"; ?>推入我的代码中。还是没有运气。

这是我的代码的小图，完整代码+最后找到的代码结果的图片。

.center{
  width:60%; 
  height:1000px;
  float:left;
  display: flex;
  align-items: center;
  justify-content:center;
}

<div class="center">
  <p>CENTER TEXT</p>
  <br>
  <p>test...</p>
</div>  <!-- end .center -->

我尝试查看我的 CSS 以查看这是否是我的问题，但我似乎找不到问题，也找不到解决方案。我也尝试过重新排列我的 div。 <p>CENTER TEXT</p> 在最后插入时也不会打印出任何间距，但它会正常更改 <p> 的内容，否则。

完整代码 this is the result of the code

body {
  background-color: black;
}

h1 {
  color: red;
  text-align: center;
  font-family:Arial;
  font-style:italic;
}

pre, p {
  color:white;
  text-align: center;
  font-family:Arial;
    font-size: 25px;

}

#index{
  width:100%
  border: 1px solid red;
  display: flex;
  justify-content: center;

}

#page{
  width:100%;
  border: 2px solid red;
  height:auto;
}

.header{
  width:100%;
  height:100px;
  background:orange;
  float:left;
}

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  align-items: center;
  justify-content:center;
}

.left{
  width:20%;
  float:left;
  height:1000px;
  background:red;
}

.right{
  width:20%;
  float:left;
  height:1000px;
  background:blue;
}

.bottom{
  clear:both;
  width:100%;
  height:100px;
  background:green;
  float:left;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> øvingCSS </title>
  </head>
  <body>
    <div id="index">
      <div id="page">
        <div class="header">
          <p>TOP TEXT</p>
        </div> <!-- end .header -->
        <div class="left">
          <p>LEFT TEXT</p>
        </div> <!-- end .left -->
        <div class="center">
          <p>CENTER TEXT</p>
          <br>
          <p>test...</p>
        </div>  <!-- end .center -->
        <div class="right">
          <p>RIGHT TEXT</p>
        </div> <!-- end .right -->
        <div class="bottom">
          <p>BOTTOM TEXT</p>
        </div> <!-- end .bottom -->
      </div> <!-- end page -->
    </div> <!-- end index -->
  </body>
</html>

【问题讨论】：

标签： html css line-breaks

【解决方案1】：

您在.center 类上使用display: flex。

使用flex-direction: column 让flex 表现为一列；

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

body {
  background-color: black;
}

h1 {
  color: red;
  text-align: center;
  font-family:Arial;
  font-style:italic;
}

pre, p {
  color:white;
  text-align: center;
  font-family:Arial;
    font-size: 25px;

}

#index{
  width:100%
  border: 1px solid red;
  display: flex;
  justify-content: center;

}

#page{
  width:100%;
  border: 2px solid red;
  height:auto;
}

.header{
  width:100%;
  height:100px;
  background:orange;
  float:left;
}

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

.left{
  width:20%;
  float:left;
  height:1000px;
  background:red;
}

.right{
  width:20%;
  float:left;
  height:1000px;
  background:blue;
}

.bottom{
  clear:both;
  width:100%;
  height:100px;
  background:green;
  float:left;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> øvingCSS </title>
  </head>
  <body>
    <div id="index">
      <div id="page">
        <div class="header">
          <p>TOP TEXT</p>
        </div> <!-- end .header -->
        <div class="left">
          <p>LEFT TEXT</p>
        </div> <!-- end .left -->
        <div class="center">
          <p>CENTER TEXT</p>
          <br>
          <p>test...</p>
        </div>  <!-- end .center -->
        <div class="right">
          <p>RIGHT TEXT</p>
        </div> <!-- end .right -->
        <div class="bottom">
          <p>BOTTOM TEXT</p>
        </div> <!-- end .bottom -->
      </div> <!-- end page -->
    </div> <!-- end index -->
  </body>
</html>

基于cmets编辑；

如果您是 flex 新手，我建议您玩 flexboxfroggy 来了解 justify-content 和 align-items 之类的想法

【讨论】：

有什么办法可以使线条之间的间距更小/更紧？
@jerpo 是的，使用justify-content 和/或align-items。请看一下我的最新编辑。如果您是 flex 新手，这将有很大帮助！
是的！我是一名 IT 新手！我会确保查看有用的资源！ :)

【解决方案2】：

当你说垂直显示文本时，你的意思是从上到下而不是从左到右？

writing-mode: vertical-rl; 
text-orientation: upright;

会为你做这件事，只需将它放在 .center css 中 https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

【讨论】：

不是我的意思，但我也一直想知道这是否可能！