Intégrer un fichier txt dans page html

Version imprimable

3 pièce(s) jointe(s)

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:

Pièce jointe 643982

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:

Pièce jointe 643984

Mon code Css:
Code:

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:

1 2 3 <div class="marquee"> <p><object data="test.txt"> </object> </p> </div>
Je suis preneur d'un avis éclairé!! :)

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:

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>

29/09/2023, 20h53
benjea06

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