Web- таинственные пробелы

506

30 августа 2017, 13:44

Здравствуйте, сразу говорю, в Веб "программировании" я чайник. Возникла такая проблема, я адаптировал страницу и теперь при уменьшении и расширении страницы, возникают некие пробелы между текстом. С чем это связано, дайте совет пожалуйста!

Answer 1

Тег  введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем . Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега  создаёт перенос.

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Переносы</title> 
  <style> 
   .word {  
    width: 160px;  
    background: #f0f0f0; 
    border: 1px solid #333; 
    padding: 10px; 
    font-size: 18px; 
   } 
  </style> 
 </head> 
 <body> 
  <p class="word">Одиннадцатиклас<wbr>сница Анжелика  
  после окончания школы выбрала профессию  
  дело<wbr>произ<wbr>водитель<wbr>ницы.</p> 
 </body> 
</html>

Применение  имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол . Он выполняет ту же роль, что и тег  — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис.

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Переносы</title> 
  <style> 
   .word {  
    width: 160px;  
    background: #f0f0f0; 
    border: 1px solid #333; 
    padding: 10px; 
    font-size: 18px; 
   } 
  </style> 
 </head> 
 <body> 
  <p class="word">Один&shy;надцатиклас&shy;сница Анжелика  
  после окончания школы выбрала профессию  
  дело&shy;произ&shy;водитель&shy;ницы.</p> 
 </body> 
</html>

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега <html> добавляем атрибут lang со значением ru.

<!DOCTYPE html> 
<html lang="ru"> 
 <head> 
  <meta charset="utf-8"> 
  <title>Переносы</title> 
  <style> 
   .word {  
    width: 160px;  
    background: #f0f0f0; 
    border: 1px solid #333; 
    padding: 10px; 
    font-size: 18px; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
   } 
  </style> 
 </head> 
 <body> 
  <p class="word">Одиннадцатиклассница Анжелика  
  после окончания школы выбрала профессию  
  делопроизводительницы.</p> 
 </body> 
</html>