Intégrer un fichier txt dans page html

**benjea06** · 15/09/2023, 17h14

Bonjour à tous,
J'ai créé une page HTML dans laquelle j'ai besoin de faire défiler un texte modifiable.
Mes collègues ne maitrisant pas le HTML devront modifier un fichier txt qui est inclus dans ma page html via la balise object.
(Je ne peux pas utiliser de php et de javascript...)

Le texte de mon fichier txt défile mais j'ai un problème de cadrage...

mon fichier txt:

Nom : txt.png
Affichages : 203
Taille : 4,3 Ko

Nom : txt.png
Affichages : 203
Taille : 4,3 Ko

Le rendu du txt comprend un retour de ligne derrière "la deuxième ligne du test".
Retour que j'aimerais supprimer...
Je pense qu'il s'agit d'un problème d'alignement mais je n'arrive pas à le régler:

Nom : txt2.png
Affichages : 199
Taille : 2,1 Ko

Nom : txt2.png
Affichages : 199
Taille : 2,1 Ko

Mon code Css:

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
.marquee {
    width: 800px;
	line-height: 4px;
background-color:#FaFaFa;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
 
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 60s linear infinite;
}
 
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

L'HTML:

Code html :

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

1
2
3
<div class="marquee">
	<p><object data="test.txt"> </object> </p>
</div>

Je suis preneur d'un avis éclairé!!

**Archimède** · 18/09/2023, 21h16

Salut, j'ai supprimé ta balise paragraphe redondante et par contre, j'ai imposé une largeur à la balise object pour permettre de loger ta seconde phrase :

Code html :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 500px;
            height: auto;
            line-height: 4px;
            background-color: #FaFaFa;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            margin-left: 20px;
            border: 1px solid black;
        }
        
        object {
            width: 500px;
            padding-left: 100%;
            animation: defiler 20s linear infinite;
        }
        
        @keyframes defiler {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }
    </style>
</head>
 
<body>
    <div>
        <object data="test.txt"> </object>
    </div>
</body>
 
</html>

**benjea06** · 29/09/2023, 20h53

Merci pour ta réponse.
J'ai pu résoudre le problème!

Intégrer un fichier txt dans page html

CSS

Vue hybride

Discussions similaires

Partager

Partager