Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
1

Letter-spacing баг или не баг?

29.10.2015, 14:12. Просмотров 1730. Ответов 12
Метки нет (Все метки)

Здравствуйте!
Использовал
CSS
1
letter-spacing
для увеличения расстояния между буквами. Как оказалось расстояние появилось и после последней буквы, заметил это, когда выравнивал текст по центру. Проверил на шрифтах Arial, Tahoma, Verdana. Как с этим борться?
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
29.10.2015, 14:12
Ответы с готовыми решениями:

letter-spacing
Здравствуйте люди,подскажите пожалуйста: letter-spacing определяет расстояение между символами,но...

letter-spacing не работает
Что то с ним не понятное. Есть такой не красивый кусок и циферки в нем ни как не разрежаются: ...

Letter-spacing и фотошоп
Давно мучает такая проблема. В фотошопе трекинг для символов задается в "очень больших числах"...

Не работает letter-spacing в Safari
Добрый день. Столкнулся со следующим косяком, никак не могу побороть. Есть свойство...

Letter-spacing на всю ширину блока
допустим ширина блока 1170 нужно сделать так чтоб при любом тексте (слове) он заходил на всю ширину...

12
Hadoukenlol
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
29.10.2015, 15:51 2
cyber1, http://jsfiddle.net/nj1vb6zy/
HTML5
1
<p>ПРИВЕТ</p>
CSS
1
p{letter-spacing:2em}
0
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 16:13  [ТС] 3
Hadoukenlol, зачем это?
0
Hadoukenlol
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
29.10.2015, 16:14 4
cyber1, примени ариал, все нормально работает http://jsfiddle.net/nj1vb6zy/1/
HTML5
1
2
<div>
<p>ПРИВЕТ</p></div>
CSS
1
2
div{width:600px; text-align:center; font-family:Arial}
p{letter-spacing:2em}
0
29.10.2015, 16:14
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 16:23  [ТС] 5
Цитата Сообщение от Hadoukenlol Посмотреть сообщение
все нормально работает
Letter-spacing баг или не баг?

Вот скрин, с той ссылки - делал из Firefox. Не по центру - слева примерно на 24px больше.
0
Hadoukenlol
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
29.10.2015, 16:28 6
cyber1, попробуй так ))
CSS
1
2
    letter-spacing: 2em;
    padding-left: 2em;
0
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 16:37  [ТС] 7
Цитата Сообщение от Hadoukenlol Посмотреть сообщение
попробуй так
пробовал, слева делать отступ равный
CSS
1
letter-spacing
, у меня единица измерения в px. Это не помогло, - отступ справа от последней буквы почти равен
CSS
1
letter-spacing
, может отличаться на несколько px.
Жду еще варианты.
0
Hadoukenlol
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
29.10.2015, 16:44 8
cyber1, попробуй выделить текст, увидишь, что справа от буквы есть небольшое расстояние, это свойство так работает)) ты можешь еще попробовать запихнуть блок с тектом в другой блок, и задать ему margin:auto
0
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 16:47  [ТС] 9
Цитата Сообщение от Hadoukenlol Посмотреть сообщение
запихнуть блок с тектом в другой блок
так он расширится за счет правого отступа и снова не ляжет по центру.
0
Hadoukenlol
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
29.10.2015, 16:58 10
cyber1, тогда так http://jsfiddle.net/nj1vb6zy/3/
HTML5
1
2
3
4
5
6
<span>П</span>
<span>Р</span>
<span>И</span>
<span>В</span>
<span>Е</span>
<span>Т</span>
CSS
1
span{margin:0 5px}
1
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 17:12  [ТС] 11
Hadoukenlol, ну так не стоит заморачиватся, тогда уж лучше поставить пробелы между буквами и использовать
CSS
1
word-spacing
CSS
1
2
3
4
div{width:600px; text-align:center; font-family:Arial;
background-color:red;}
p{word-spacing:50px
};
HTML5
1
2
<div>
<p>П Р И В Е Т</p></div>
Добавлено через 2 минуты
Все же хочется увидеть особенный ответ, чтоб не надо было добавлять пробелы между буквами и, чтоб не надо было оборачивать каждую букву тегом. Может кто нашел хороший костыль!
0
Vadim_Lasso
432 / 351 / 259
Регистрация: 29.11.2011
Сообщений: 627
29.10.2015, 17:19 12
Лучший ответ Сообщение было отмечено cyber1 как решение

Решение

cyber1, https://jsfiddle.net/vadim_Lasso/j9w7d4mx/

HTML5
1
2
3
4
5
<div class="container">
    <div class="center">
        <p>ПРИВЕТ</p>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
    width: 600px; 
    background-color: #AFAFAF;
}
 
.center {
    display: table;
    margin: 0 auto;
    background-color: red;
}
 
p {
    letter-spacing: 2em;
    margin-right: -2em;
    text-align: right;
}
1
cyber1
4 / 4 / 4
Регистрация: 09.06.2015
Сообщений: 195
29.10.2015, 17:33  [ТС] 13
LASSO, О да, это заработало!!! Спасибо
0
29.10.2015, 17:33
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.10.2015, 17:33

Свойство letter-spacing по-разному отображается на разных мониторах
Добрый день! Интересная штука со свойством css - letter-spacing. Подскажите, пожалуйста, кто...

Баг на сайте
сайт был взломан и на нем было куча кода я его почистил и встретил баг на сайте мож кто знает как...

SAFARI баг
Здравствуйте! Раньше никогда с САФАРИ неимел дело , но теперь пришлось , подскажите - на сайте...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru