В FireFox текст в блоке не вмещается в 3 строки и переносит 1-2 символа

@crt13 · Регистрация: 03.07.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте форумчане!

ТОЛЬКО в FireFox текст в блоке не вмещается в 3 строки и переносит 1-2 символа и получается 4 строки(тоже самое с точками на скриншоте). Скрин ниже.

Заранее спасибо!
Только учусь.

@Fedor92 · 19.07.2015, 16:32

Нужно посмотреть на код...

@crt13 · 20.07.2015, 12:43 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>Design Studios</title>
        <link rel="stylesheet" href="style\main.css" />
    </head>
    
    <body bgcolor="#282828">
        <div id="container">
            <div id="header">
                <img class="logo"src="style\logo.jpg" title="logo" />
                <div class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            
        <div id="wrap">
            <div id="content">
                <div class="first-div-content">
                    <p class="content-p-1">Clean <span class="span-content-1">&</span> Professional Web Design</p>
                    <p class="content-p-2">Providing High Quality Web Solutions</p>
                    <p class="to4ki">...........................................................................................................................................................</p>
                </div>
                    
                <div class="second-div-content">
                    <p class="content-p-3-4-5">We provide <span class="span-content-3-4"> <b>first class</b> </span> web solutions for organizations and small businesses looking to make a <span class="span-content-3-4"> <b>big impact</b> </span> online. Our services include web design, online marketing campaigns, and search engine optimization.</p>
                    <p class="to4ki">...........................................................................................................................................................</p>
                </div>
                
                <div class="optimization"> Optimization
                </div>
                <div class="marketing"> Marketing
                </div>
                <div class="web-design">
                    <p class="web-desp1">web design</p>
                    <p class="to4ki2">.....................................................................</p>
                    <div class="web-design2">
                        <p class="web-desp2">We provide web design solutions of the very highest order. We'll work with you from the start to understand your exact requirements and will continuosly work with you to ensure that you're happy with the final site that you purchase.</p>
                    </div>
                    <p class="web-des-pa"><a class="web-des-p-a" href="#">GET MORE DETAILS >></a></p>
                </div>
            </div>
                
            <div id="rasporka">
            </div>
        </div>
            
        <div id="footer">
            <p>footer</p>
        </div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
p {
margin: 0;
}
 
 
#container {
margin: 0 auto;
width: 1100px;
}
 
#header {
background: #333333;
width: 1100px;
height: 133px;
margin-top: -16px;
}
 
.logo {
padding-top: 25px;
padding-left: 55px;
}
 
.menu {
float: right;
padding-top: 45px;
padding-right: 70px;
}
 
.menu ul li {
display: inline-block;
padding: 11px;
font-family: arial;
}
 
.menu ul li a {
text-decoration: none;
font-size: 11pt;
}
 
.menu ul li a:link {
color: #eeeeee;
}
 
.menu ul li a:visited {
color: #AFEEEE; 
}
 
.menu ul li a:hover {
color: #00aeef;
}
 
#wrap {
background: white;
width: 1100px;
height: auto !important;
}
 
#content {
width: 960px;
height: auto !important;
background: white;
word-break: break-all;
padding-left: 70px;
padding-right: 70px;
padding-top: 55px;
}
 
.to4ki {
font-family: "MyriadProRegular";
font-size: 30px;
color: #bbbbbb;
}
 
.to4ki2{
font-family: "MyriadProRegular";
font-size: 17px;
color: white;
}
 
.first-div-content {
line-height: 1;
}
 
.second-div-content {
line-height: 1;
}
 
.content-p-1 {
font-family: "MyriadProBold";
font-size: 60px;
color: #333333;
}
 
.content-p-2 {
font-family: "MyriadProRegular";
font-size: 50px;
color: #bbbbbb;
padding-bottom: 21px;
}
 
.content-p-3-4-5 {
font-family: "MyriadProRegular";
font-size: 33px;
color: #555555;
padding-top: 31px;
padding-bottom: 21px;
}
 
.span-content-1 {
font-size: 60px;
color: #00bff3;
}
 
.span-content-3-4{
font-family: "MyriadProBold";
}
 
.web-design {
width: 284px;
background: #29abe2;
margin-left: 2px;
text-align: center;
margin-top: 39px;
}
 
.web-design2 {
width: 233px;
text-align: center;
word-break: normal;
margin-left: 26px;
margin-top: 20px;
}
 
.web-desp1 {
font-family: "MyriadProRegular";
font-size: 40px;
color: white;
padding-top: 16px;
}
 
.web-desp2 {
font-family: Arial;
font-size: 14px;
color: #e9f5fd;
line-height: 1.5;
}
 
.web-des-pa {
margin-top: 38px;
padding-bottom: 43px;
}
 
.web-des-p-a {
background: #0076a3;
font-family: "MyriadProRegular";
font-size: 17px;
color: #f4f7fa;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 42px;
padding-right: 42px;
box-shadow: inset 0 0 5px #464646;
}
 
.marketing {
width: 284px;
float: right;
background: #00aeef;
margin-right: 53px;
}
 
.optimization {
width: 284px;
float: right;
background: #00aeef;
}
 
#rasporka {
clear: both;
height: 62px;
}
 
#footer {
margin: 0 auto;
background: #F8F8FF;
width: 1100px;
}
 
 
 
 
 
 
 
 
 
 
 
@font-face {
    font-family: "MyriadProBold";
    src: url("../fonts/MyriadProBold/MyriadProBold.eot");
    src: url("../fonts/MyriadProBold/MyriadProBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MyriadProBold/MyriadProBold.woff") format("woff"),
    url("../fonts/MyriadProBold/MyriadProBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
 
@font-face {
    font-family: "MyriadProRegular";
    src: url("../fonts/MyriadProRegular/MyriadProRegular.eot");
    src: url("../fonts/MyriadProRegular/MyriadProRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MyriadProRegular/MyriadProRegular.woff") format("woff"),
    url("../fonts/MyriadProRegular/MyriadProRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@Fedor92 · 20.07.2015, 12:58

Не по теме:

crt13, ощущение дежавю... На форуме этот шаблон уже точно кто-то верстал...

Теперь по проблеме... Дело в том, что браузеры по разному рендерят шрифты особенно кастомные... Поэтому в одном броузере они крупнее в другом поменьше... По сути проблему можно решить разными вариантами... Первый не использовать кастомный шрифт, второй увеличить размер параграфа, то есть поработать с его размерами(отступов это тоже касается)... Уменьшить размер используемого шрифта... Есть подозрение, что в опрере тоже 4 строчки... Ну это уже на Ваш выбор... Кстати, и в прошлый раз были вопросы по шрифтам, так что если не лень можете посмотреть темы по оценке вёрстки... И чуть не забыл при генерации шрифта используйте доверенный сервис, иногда и сервисы шалят...

@crt13 · 20.07.2015, 13:34 **[ТС]**

Это мой первый шаблон, скачал его на freepsd, поэтому думаю я не один такой))
В опере все как нужно, в ней и работаю.
Спасибо, попробую все способы

Шрифты скачал по первой ссылке в гугле, каюсь - не знал как правильно.

Добавлено через 16 минут
Является ли выходом из ситуации увеличение ширины блока на 4px? Это скажем вопрос наперед, можно ли так поступать или нельзя нарушать четко поставленную ширину?

@Fedor92 · 20.07.2015, 13:41

Сообщение от crt13

Является ли выходом из ситуации увеличение ширины блока на 4px? Это скажем вопрос наперед, можно ли так поступать или нельзя нарушать четко поставленную ширину?

Если это необходимо то да, но в серьёзной вёрстке конечно нежелательно(это уже с прицелом на будущее)... В данном макете, например, незначительное изменение ширины блока вряд ли скажется на расположении остальных элементов...

@crt13 · 20.07.2015, 13:50 **[ТС]**

Еще раз спасибо

Увеличил ширину блока на 4px и уменьшил у него отступы с права и с лева по 2px и все стало.

@Fedor92 · 20.07.2015, 13:52

Не по теме:

crt13, да в принципе особо не за что...:)

@crt13 · 20.07.2015, 13:54 **[ТС]**

Еще быстрый вопрос, поставил word-break: normal(забыл как-то изначально) и текст разложился на 4 строки. По псдшнику размер текста верный, стили тоже. В какую сторону смотреть, что бы решить данную проблему?

@Fedor92 · 20.07.2015, 13:58

crt13, быстрый ответ: а какой смысл в использовании данного свойства? Текст выходит за пределы блока? По мне намного проще использовать text-align:justify и не париться...

@crt13 · 20.07.2015, 14:03 **[ТС]**

Цель же конечная что бы слова не ломались

@Fedor92 · 20.07.2015, 14:17

Сообщение от crt13

Цель же конечная что бы слова не ломались

А вот сейчас не очень понял... Но объясню, что происходит слово дизайн по идее целиком переносится вниз - ширины блока, чтобы всё поместилось не хватает и как итог 4 строка... И кажется я шаблон вспомнил... Границы там не так делаются, то есть не точками в блоках как у Вас...

@crt13 · 20.07.2015, 14:35 **[ТС]**

1 скрин с ПСДшника, второй с браузера. Ширина и отступы верные.
Если верить ПСДшнику, то границы - точки с стилем текста.
Конечная цель - что бы все вместилось в 3 строки и слова не ломались.

@Fedor92 · 20.07.2015, 14:45

crt13, набросок на ариале без лишних свойств... Масштабируемый...

И одинаковый во всех броузерах...

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>Design Studios</title>
        <link rel="stylesheet" href="style\main.css" />
    </head>
    <style>
    p{width:1070px; padding:15px ; border-top:2px dotted #ccc;  border-bottom:2px dotted #ccc; font:32px/1.25 Arial, monoscape}
    span{font-weight:bold}
    </style>
     <p>We provide <span>first class</span> web solutions for organizations and small businesses looking to make a <span>big impact</span> online. Our services include web design, online marketing campaigns, and search engine optimization.</p>
    </body>
</html>

@crt13 · 20.07.2015, 16:06 **[ТС]**

border тут не катит

Я изначально тоже border делал, но нужно же как в шаблоне

p не может быть 1070px, потому что ширина #content 964px. Вот в чем вся соль

У меня же идет #wrap а в середине уже блок #content.

Добавлено через 8 минут
Решил проблему:
Было:

CSS
1
2
3
4
5
font-family: "MyriadProRegular";
font-size: 33px;
color: #555555;
padding-top: 31px;
padding-bottom: 21px;

Стало:

CSS
1
2
3
4
5
6
7
8
font-family: "MyriadProRegular";
font-size: 32px;
color: #555555;
padding-top: 31px;
padding-bottom: 21px;
word-break: normal;
word-spacing: -2px;
line-height: 1.3;

@Fedor92 · 20.07.2015, 16:14

Сообщение от crt13

border тут не катит

Интересно знать по какой причине?

Можно сделать линию с помощью background, как альтернативный вариант...

Сообщение от crt13

Я изначально тоже border делал, но нужно же как в шаблоне

А в шаблоне пишут где border, а где точки?

Точки прорисовывать тяжело, поэтому дизайнеры их шрифтом и набивают... На моей памяти не было дизайнеров, которые набивают границы точками - элементарно потому-что на разных разрешениях часть точек будет падать либо на новую строку - либо не доходить до конца блока...

Сообщение от crt13

p не может быть 1070px, потому что ширина #content 964px

Уменьшите размер шрифта, сделайте ширину блока меньше(964px), что Вам мешает? Погода, магнитные бури или ещё что-то?

@crt13 · 20.07.2015, 16:22 **[ТС]**

Суть же верстки по шаблону - постараться максимально идентичную пиксель в пиксель страничку сделать

Вы не поняли наверное или я оО Ширина страницы - 1100px.
Есть пустой #wrap с шириной 1100px, а в середине идет #content с шириной 964px и отступами с права и лева(скрин ниже).

По поводу точек согласен, значит это косяк шаблона?

@crt13 · 20.07.2015, 16:28 **[ТС]**

в общем забить лучше на эти точки, потому что в шаблоне ниже идут снова точки только ВЕРТИКАЛЬНО. Действительно проще бордер задать да и все.

@Fedor92 · 20.07.2015, 16:28

crt13, поверьте Я Вас ни к чему не принуждаю, конечно делайте, как считаете нужным или удобным для Вас... Я просто говорю, как бы делал я... Не хотите границей - рисуйте точки...

Аккурат 964px:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>Design Studios</title>
        <link rel="stylesheet" href="style\main.css" />
    </head>
    <style>
    p{width:934px; padding:15px ; border-top:3px dotted #ccc;  border-bottom:3px dotted #ccc; font:28px/1.25 Arial, monoscape}
    span{font-weight:bold}
    </style>
     <p>We provide <span>first class</span> web solutions for organizations and small businesses looking to make a <span>big impact</span> online. Our services include web design, online marketing campaigns, and search engine optimization.</p>
    </body>
</html>

Удачи в разработках...

@crt13 · 20.07.2015, 16:35 **[ТС]**

Вот этот dotted вышел у вас сексуальнее предыдущего, спасибо, забираю

Я все таки оставлю так.

CSS
1
2
3
4
5
6
7
8
font-family: "MyriadProRegular";
font-size: 32px;
color: #555555;
padding-top: 31px;
padding-bottom: 21px;
word-break: normal;
word-spacing: -2px;
line-height: 1.3;

Спасибо за ваше терпение

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46

	В FireFox текст в блоке не вмещается в 3 строки и переносит 1-2 символа 19.07.2015, 15:38. Показов 2265. Ответов 20 Метки нет (Все метки) Здравствуйте форумчане! ТОЛЬКО в FireFox текст в блоке не вмещается в 3 строки и переносит 1-2 символа и получается 4 строки(тоже самое с точками на скриншоте). Скрин ниже. Заранее спасибо! Только учусь. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	19.07.2015, 16:32
	Нужно посмотреть на код... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.07.2015, 12:58
	Не по теме: crt13, ощущение дежавю... На форуме этот шаблон уже точно кто-то верстал... Теперь по проблеме... Дело в том, что браузеры по разному рендерят шрифты особенно кастомные... Поэтому в одном броузере они крупнее в другом поменьше... По сути проблему можно решить разными вариантами... Первый не использовать кастомный шрифт, второй увеличить размер параграфа, то есть поработать с его размерами(отступов это тоже касается)... Уменьшить размер используемого шрифта... Есть подозрение, что в опрере тоже 4 строчки... Ну это уже на Ваш выбор... Кстати, и в прошлый раз были вопросы по шрифтам, так что если не лень можете посмотреть темы по оценке вёрстки... И чуть не забыл при генерации шрифта используйте доверенный сервис, иногда и сервисы шалят... 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 13:34 [ТС]
	Это мой первый шаблон, скачал его на freepsd, поэтому думаю я не один такой)) В опере все как нужно, в ней и работаю. Спасибо, попробую все способы Шрифты скачал по первой ссылке в гугле, каюсь - не знал как правильно. Добавлено через 16 минут Является ли выходом из ситуации увеличение ширины блока на 4px? Это скажем вопрос наперед, можно ли так поступать или нельзя нарушать четко поставленную ширину? 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 13:50 [ТС]
	Еще раз спасибо Увеличил ширину блока на 4px и уменьшил у него отступы с права и с лева по 2px и все стало. 0

@Fedor92
	20.07.2015, 13:52
	Не по теме: crt13, да в принципе особо не за что...:) 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 13:54 [ТС]
	Еще быстрый вопрос, поставил word-break: normal(забыл как-то изначально) и текст разложился на 4 строки. По псдшнику размер текста верный, стили тоже. В какую сторону смотреть, что бы решить данную проблему? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.07.2015, 13:58
	crt13, быстрый ответ: а какой смысл в использовании данного свойства? Текст выходит за пределы блока? По мне намного проще использовать text-align:justify и не париться... 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 14:03 [ТС]
	Цель же конечная что бы слова не ломались 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 14:35 [ТС]
	1 скрин с ПСДшника, второй с браузера. Ширина и отступы верные. Если верить ПСДшнику, то границы - точки с стилем текста. Конечная цель - что бы все вместилось в 3 строки и слова не ломались. Миниатюры 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 16:22 [ТС]
	Суть же верстки по шаблону - постараться максимально идентичную пиксель в пиксель страничку сделать Вы не поняли наверное или я оО Ширина страницы - 1100px. Есть пустой #wrap с шириной 1100px, а в середине идет #content с шириной 964px и отступами с права и лева(скрин ниже). По поводу точек согласен, значит это косяк шаблона? Миниатюры Изображения 0

@crt13 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 46
	20.07.2015, 16:28 [ТС]
	в общем забить лучше на эти точки, потому что в шаблоне ниже идут снова точки только ВЕРТИКАЛЬНО. Действительно проще бордер задать да и все. 0