Question

当我使用手动换行符时，它可以正常工作，但当我不使用时，一切都只是重叠。

这是CSS：

header {
    background: #fcb9aa;
    color: #f3d9d9;
    height:100px;
    margin: 0;
    padding: 0;
    position: relative;
    text-align:right;
}
ul {
    position: relative;
    margin-top: 0px;
    padding-left: 10px;

}
header li {
    display: inline-block;
    margin:30px;

    
}
body{
    margin:0;
    padding: 0;
    margin-top: 0;
    background-color: white;
    font-family: 'Pacifico', cursive;
    
}

a, a:hover, a:focus,a:active{
    text-decoration: none;
    color:inherit;
    font-size: 30px;
    font-family: 'Pacifico', cursive;

}
a:hover{
    color: #55cbcd
}
h1 {
    margin: 40px;
    text-align: center;
    font-family: 'Pacifico', cursive;
}
h2 {

}
.logo{
    border-radius: 50%
}
div.nexto{
    display: inline-block;
    position: relative;
}
.contentl figure{
    height: auto;
    width: 600px;
    overflow: hidden;

}
.contentl figure img{
    height:auto;
    width: 600px;
    transition: transform .3s ease;
}
figure img:hover{
    transform: scale(1.5)
}
div.content{
    margin:0;
    padding:0;
    position: relative;
    top: -400px;
    left: -20px;
    text-align: left;
    overflow-wrap: break-word;
}
.substance{
    font-family: Arial, Helvetica, sans-serif;
    overflow-wrap: break-word;
}

这是 HTML

<body>
  <header>
    <ul>
      <li><a>HOME<a></a></li>
      <li><a href="albums.html">ARTICLES</a></li>
      <li><a href="singles.html">CONTACT</a></li>
      <li><a href="artists.html">ABOUT US</a></li>
    </ul>
  </header>
  <section>
    <h1>Welcome to my website</h1>
  </section>
  <section class="contentl">
    <div class="nexto">
      <figure>
        <img src="img/ph1.jpg" alt="im1">
      </figure>
    </div>  
    <div class="nexto">
    <div class="content">
        <h1 class="date">6/7/2021</h1>
        <h2 class="name">
          PSYCHOLOGY STUFF
        </h2>
        <h3 class="substance">Psychology is the science of mind and behavior. Psychology includes the study of conscious and unconscious phenomena,<br> as well as feelings and thought. It is an academic discipline of immense<br> scope. Psychologists also seek an understanding of the emergent properties of brains, linking the discipline to neuroscience.</h3>
    </div>
  </div>
  </section>
  
</body>
</html>

问题出在 h3 标签中，我需要添加自己的换行符才能使其工作。

此外，我非常感谢一些让我的代码运行得更好的技巧，因为现在一切都让我感到非常困惑，而我正在寻找简化事情的方法。

Answer 1

您可以为 h3 标签使用固定宽度，而且您可以将带有 h3 标签的文本放在另一个标签（一个

标签）内。

还可以使用一些 css 框架，如 bootstrap、bulma 等，帮助您以更少的努力制作出色的 css UI。

当文本太长时元素会中断

1 个答案: