Question

基本上，我在容器中有中心对齐文本。当屏幕尺寸变小时，它会进入下一行。在某些时候，下一行中只有一个（或几个）单词。我怎样才能让它平均分开？

例：
一二三四五六

屏幕尺寸变小时：
一二三四五 6

如何使其自动调整为：
一二三三四五六。

当屏幕尺寸进一步下降，直到文本行无法修复两行时，自动调整为：
一二二三四五六。

Answer 1

@media screen and (max-width: 992px) {
    div {
         width:150px;
    }
}

了解媒体查询：https://www.w3schools.com/css/css3_mediaqueries_ex.asp
你必须从你要更改@media screen and (**here**)

的屏幕大小的width内写

Answer 2

只需将其设置为跨度或div并设置为跨越display: inline-block;

CSS：

.block {
 display: inline-block;
 }

HTML：

<span class="block">
one two three
</span>
<span class="block">
four five six
</span>

https://jsfiddle.net/ysk4s1n6/

Answer 3

附加的代码片段使用“CSS Grid”并设置为自动填充，这意味着它尽可能多地填充“一，二，三，四，五，修复”。什么不适合第一行，它移动到第二行，等等。

此特定设置不使用媒体查询，因为断点是div，而不是设备宽度。它是内容响应的，而不是设备/宽度响应。

.wrapper {
  display: grid;
  grid-template-columns:
  repeat(auto-fill, minmax(100px, 1fr))
  ;
  grid-template-areas:
  "div"
  ;
}

.div {
  background-color: lightgrey;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrapper">
    <div class="div">one</div>
    <div class="div">two</div>
    <div class="div">three</div>
    <div class="div">four</div>
    <div class="div">five</div>
    <div class="div">six</div>
</div>

</body>
</html>

Answer 4

我用这个;

@media screen and (max-width: 1024px) {
    // codes for tablet
}

@media screen and (max-width: 768px) {
    // codes for phone
}

如何根据屏幕大小动态划分线条？

4 个答案: