Question

我们在移动设备上的登陆看起来很难看，因为句子被分成两行，但只有最后一个单词跳到下一行。让我用一个例子来解释它。让我们在桌面中说句子是：

你好这是我漂亮的网站。不客气！

在移动上，文字在最后一个单词处被破坏，这看起来很难看：

你好这是我漂亮的网站。你是

欢迎！

但是，仅限于移动，我尝试实现以下目标：

你好这是我漂亮的网站。

欢迎你！

到目前为止，我最好的想法是在移动设备中显示一个文本块，在其他设备中显示另一个不同的块文本：

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
from .models import User


admin.site.register(User, UserAdmin)

但在我看来，这不是一个非常优雅的解决方案......有更好的解决方案吗？

Answer 1

改为使用条件换行符：

@media(min-width:480px) {
  .mobile_only {
     display: none;
  }
}

<div>
  Hello this is my beautiful website. <br class="mobile_only"/>You are welcome!
</div>

Answer 2

你可以使用br标签打破你想要的任何东西，你可以使用媒体查询来避免它在PC或移动设备中。下面给出的例子

@media (min-width: 375px) {
  h2 br {
    display:none;
  }
}

  <h2>Hello this is my beautiful website. <br> You are welcome!</h2>

Answer 3

您当前的解决方案可能是最常见的解决方案。但我想你也可以这样做：

HTML：

<div id='paras'>
    <p>This is sentence one.</p>
    <p>This is sentence two.</p>
</div>

CSS：

#paras p { display: inline-block; }
@media(max-width:480) {
    #paras p { display: block; }
}

这也不是超级优雅，但至少意味着段落将在桌面上彼此相邻，然后在移动设备上叠加。

缺点是，在桌面上，即使你想要它们，它们也永远不会堆叠。所以你需要手动休息：

HTML：

<div id='paras'>
    <p>This is sentence one.</p>
    <p>This is sentence two.</p>
    <p class='break'>This is sentence one A.</p>
    <p>This is sentence two B.</p>
</div>

CSS：

.break::before { content: '.'; visibility: hidden; display: block; }

Fiddle

Answer 4

将块放入范围

<span class="blockOnMobile">Hello this is my beautiful website.</span> <span class="blockOnMobile">You are welcome!</span>

@media(max-width:480) {
.blockOnMobile {
   display: block;
}

Answer 5

您可以尝试这样的事情：

＆＃13;

@media only screen and (max-width: 480px) {
  .text span{
    display: block;
  }
}

＆＃13;

<div class="text">Hello this is my beautiful website. <span>You are welcome!<span><div>

＆＃13;

Answer 6

潜在的css解决方案是降低文本部分的宽度，以便在宽度小于480px时将最后一个句子放到下一行。

如果您想深入研究javascript，可以创建一个if语句，如果正文的宽度小于480px，则div的innerHTML等于=＆＃34;第一行第二行＆＃34 ;;。

希望有所帮助！如果您需要，很乐意进一步解释。

如果一个句子不适合单行，则在指示的位置划入新行

6 个答案: