В 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;

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

	В FireFox текст в блоке не вмещается в 3 строки и переносит 1-2 символа 19.07.2015, 15:38. Показов 2283. Ответов 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