时间戳

首页 > 解决方案 > 如何在使用 display:flex 换行文本后删除空格？

html - 如何在使用 display:flex 换行文本后删除空格？

问题描述

我正在尝试并排制作两个文本块。我将 display:flex 与 flex-direction: flex-start 一起使用，但是，当我更改页面大小时，有时两个块之间会有很大的间隙。

案例1： 页面宽度较小时，没有空格：

案例2：在扩大页面宽度的同时，第二个块向右移动，两个块之间出现间隙

案例3：当页面大到可以装下长字时，缝隙又缩小了

这是代码：

<!DOCTYPE html>
<html>
<head>
<style>

.a {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-flow: row;
   align-content: flex-start;
}

.b {
   border: 1px solid;
}

</style>
</head>
<body>


<div class="a">
  <div class="b">This is some text. This is some texts a very loooooooooooooong text</div>
  <div class="b">This is some text. This is some text. This is some text.</div>
</div>

</body>
</html>

标签： htmlcss

解决方案

推荐阅读