Tengo un elemento de marquesina en html que muestra la salida de una API, pero solo quiero hacer que el texto se desplace si el texto en sí es más grande que el ancho del contenedor en el que se encuentra, de lo contrario, debería permanecer estacionario. He investigado un poco y no puedo averiguar cómo lograría esto.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RadioWay >> Splash</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="music-player"> <marquee id="title" behavior="scroll" direction="left"></marquee> <marquee id="artist" behavior="scroll" direction="left"></marquee> </div> </html>

 $.getJSON( "https://derrick.xonosho.st/api/nowplaying/1", function (data) { // artist name, song title, URL album var song_title = data["now_playing"]["song"]["title"]; var artist_name = data["now_playing"]["song"]["artist"]; var album_URL = data["now_playing"]["song"]["art"]; $(".disk").css("background-image", `url("${album_URL}")`); $("#title").html( `${song_title}` ); $("#artist").html( `${artist_name}` ); } );