html - 文本在小尺寸屏幕上显示为多行

Question

我有

 @media screen and (max-width: 480px) {

      #footer {
        padding: 2em 1em 0.1em 1em;
      }
      #lineForUrl a #title-font {
max-width: 200px;
 overflow: visible;   
  display: inline-block;
font-size: smaller;
    }

    }


<span id="title-font" title="{{post.title}}">
          {{ post.title }}</span>

当它在小型设备中时，我希望单词位于多行中。 我尝试了 overflow;scroll。

我希望它是这样的

aaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaa

Answer 1

因此，正如我在评论中所说，您应该查看此链接: How to force a line break in a loooooong word in a DIV?

这是带有解决方案的 JS Fiddle，see it here

CSS 代码:

 #lineForUrl a #title-font{
   word-wrap: break-word;
 }

 @media screen and (max-width: 480px) {

      #footer {
        padding: 2em 1em 0.1em 1em;
      }
      #lineForUrl a #title-font {
        max-width: 100%;
        overflow: visible;   
        display: inline-block;
        font-size: smaller;
    }

  }