текстов отображаются в нескольких строках для малого размера экрана

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 скрипку с раствором, 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; 
    } 

    }