2

正如标题所说，如何防止标题在换行期间扩展全角？

标题在一个容器内，其中包含display: flex;和align-items: center;

这是一个直观的解释，可以更好地解释我的问题（蓝线代表 flex 容器）：

我的问题的视觉解释

这是我的 CodePen 的演示链接：https ://codepen.io/codezinx/pen/LYOdZXK

有什么解决办法吗？

4

3 回答 3

0

显示网格有助于我们轻松地将项目放置在 DOM 上。这就是我使用 display: grid 的原因，因为我们必须将项目居中。我使用了地点项目：中心。那一行空白：换行有助于将文本移动到下一行。

body{
  display: grid;
  place-items: center;
}
    
.b {
  display: -webkit-box;
  width:10rem;
  
  border : solid black;
  white-space: wrap;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:2.5rem;
  text-align: center;
}

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px;
}
 <div class="a">
<div class="b">
 lorem ipsum
 </div>
   </div>

于 2022-02-20T03:48:13.987 回答
-1

最简单的方法是将您的 h1 填充从: 更改padding: 10px;为padding: 10px 50px.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:30px;
  width: 50%;
}

h1 {
  background-color: #444;
  color: white;
  text-align: center;
  font-size: 3rem;
  padding: 10px 50px;
}
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <h1>Just some random text lorem ipsum si dolor amet</h1>
    </div>
  </body>
</html>

于 2022-02-20T08:04:02.090 回答
-2

尝试在它周围放置 span HTML 元素

    <pre><span>
    blah blah
    blah blah
    </span></pre>
于 2022-02-20T02:28:32.633 回答