Taille de la police qui change en fonction du remplissage du container

**Grasshoper** · 19/09/2021, 10h18

Bonjour à toutes et à tous,

Je me heurte à une problème que je ne comprends pas. J'ai une feuille de style CSS et un code html assez simples.
Lorsque je teste ce code sur un smartphone (Android) la taille de la police varie en fonction du remplissage du container (en texte). En gros, j'ai réussi à déterminer que si une phrase est supérieure à la 'width' (> 1 ligne) alors la police change (plus grosse) sinon (c'est à dire que la taille de la phrase < 1 ligne), elle et minuscule. Je parle ici de width en mode portrait.

Comment régler ce problème et homogénéiser la taille de police pour qu'elle reste de taille fixe partout?

J'ai produit un exemple minimal ci dessous:
Feuille de style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
html {
	min-height: 100%;
}
 
body {
	background: white;
	position: absolute;
	width: 100%;
	font-size: 100%;
	overflow-x: hidden;
}
 
/*****
** FONT DEFINITION
*******/
@font-face {
	font-family: sans-serif;
	font-weight: normal;
	font-style: normal;
}
 
/*****
** STYLE AND POSITIONS OF DIVS
*******/
.useful-width {
	margin-left: auto;
	margin-right: auto;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 1.2em;
	text-align: justify;
	background-color: rgba(255, 255, 255, 0.9);
	min-height: 500px;
}

Un premier fichier index.html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="css/stylesCSS.css" />
	</head>
	<body>
		<div class="useful-width">
				Lorem ipsum dolor sit amet. Est veritatis dolor ut galisum pariatur ut deleniti blanditiis. Id inventore tenetur a earum culpa sed consequatur reiciendis sit repellendus modi? Ut tempora Quis quo soluta soluta aut deleniti eius eum dolorem galisum et quibusdam voluptate et illum fuga sit consectetur facilis.
				Nam modi temporibus ea sint repellat aut numquam voluptatem id itaque explicabo! Id voluptas accusamus non totam enim ab maiores magni ut dolorum iste est labore assumenda At unde repudiandae. Qui voluptatem minima id voluptatem dolorum aut natus pariatur. Et commodi officiis et voluptate internos aut sunt modi et deserunt consequatur et consequatur dolore ut autem nobis non cupiditate facilis.
				Ut magni aliquid qui impedit possimus id unde molestias sit ratione molestiae. Cum accusamus nulla qui neque maxime aut minus recusandae ad fuga earum. Rem quidem distinctio non nesciunt nisi eum corporis consequatur sed voluptatem quas quo voluptates enim sit commodi sunt!
		</div>
	</body>
</html>

et un second; identique, modulo la taille du texte:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="css/stylesCSS.css" />
	</head>
	<body>
		<div class="useful-width">
			test
		</div>
	</body>
</html>

Vous pouvez voir le rendu (sur smartphone) dans les 2 fichiers en PJ.

merci!

Taille de la police qui change en fonction du remplissage du container

CSS

Mode arborescent

Discussions similaires

Partager

Partager