Question

我有一个页面，我想在移动设备中对文本进行对齐，然后将文本拆分并在桌面中进行对齐。目前，移动视图很好，但是文本拒绝text-align: justify;，而桌面很好，除了我想将Adsler is a classified listings company established in 2018.行分成两个相等的部分然后进行对齐

HTML：

<div class="a"> A </h1></div><div class="boutus"> bout 
</div><div class="boutustext">Adsler is a classified 
listings company established in 2018.</div>

页面：https://adsler.co.uk/about-adsler/

Answer 1

步骤1）。将<br>与<br class="mobile-br">

这样的类一起使用

在您要分割的文本之间设置：

<div class="boutustext">Adsler is a classified 
<br class="mobile-br">
listings company established in 2018.</div>

步骤2）。使用以下方法将<br>隐藏在桌面的CSS媒体查询中：

.mobile-br {
display:none;
}

对于移动设备：

.mobile-br{
display:block;
}

Answer 2

有几种不同的方法可以做到这一点，马库斯（Marcus）是一个选择，这就是我的做法。

将您的两行括起来。

代码：

.boutustext {
  text-align: justify;
}

@media(max-width: 767px) {
  /*Or whatever your breakpoint is*/
  .boutustext span {
    display: block;
    text-align: justify;
  }
}

<div class="boutustext">
  <span>Adsler is a classified</span>
  <span>listings company established in 2018.</span>
</div>

默认情况下，跨度将以行内显示并受您的对正文本影响，但随后在移动设备上，跨度将显示为块元素，并将其环绕。

请记住，对齐可能会或可能不会明显显示，这取决于文本的宽度与容器的宽度比较。如果太短，则不会尝试填充它的宽度。

如何在@media的html文本中设置中断？

2 个答案: