How to Add Spaces in HTML Marquee Text

Updated April 17, 2017

HTML consists of statements that define a Web page's elements, controls and appearance. You can place text anywhere inside the body of an HTML document. Unfortunately, browsers remove extra spacing between words in a text string. This increases the time it takes to format some elements such as the HTML marquee. A marquee displays scrolling text that moves across a Web page. To add spaces to text in a marquee, use JavaScript to replace regular spaces with special characters that the browser will not remove.

Open Notepad. Paste this HTML code into an empty document:

Marquee Test

This creates a Marquee that contains no text.

Add the following JavaScript function after the "" tag:</p> <p>function set Marquee() {</p> <p>This function sets the marquee text. The variable "originalText" holds the text string that you want to appear in the marquee. In this example, that text is "Marquee String Text." Add as many spaces as you like between the words or characters. "MarqueeID" holds the ID of the marquee. The "replace" method replaces the blanks in the text string with the special HTML character stored in "blankCharacter." The last statement adds the modified text to the marquee object.</p> <p>Add this JavaScript code after the previous code:</p> <p>This calls the set Marquee function after the Web page loads.</p> <p>Save the Notepad file with an .html extension. For example, if you want to name the file "Marquee Test," save it as "Marquee Test.html."</p> <p>Open the file in your browser to verify that spaces exist between the words in the marquee's text.</p> <div class="tips"> <h4 class="text-shadow underline">Tip</h4> <p>Note that the "<marquee>" tag in the body of the HTML has an id of "Marquee1." Name the ID anything you like. It must, however, match the value that you set for MarqueeID in the JavaScript function.</p> </div></div> <div id="google-article-block-12872004" class="no-print"> <script> var ad_height; var VIEWPORT_WIDTH = document.documentElement.clientWidth || document.body.clientWidth; if (VIEWPORT_WIDTH > 500) { ad_height = '455px'; } else { ad_height = '555px'; } </script> <!-- UK_MAIN --> <ins id="ggads" class="adsbygoogle" style="display:inline-block;min-width:320px;max-width:1200px;width:100%;" data-ad-client="ca-pub-2494113940073314" data-ad-slot="2945830674"></ins> <script> document.getElementById('ggads').style.height = ad_height; (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="references"> <h4>References</h4> <ul> <li> <a href="" rel="nofollow"> <span>University System of Georgia: Online Library Learning Center Glossary</span> </a> </li> <li> <a href="" rel="nofollow"> <span>Federal Financial Institutions Examination Council: E-Banking</span> </a> </li> <li> <a href="" rel="nofollow"> <span>W3Schools: HTML Entities</span> </a> </li> <li> <a href="" rel="nofollow"> <span>World Wide Web Consortium: 11 Obsolete Features --- HTML5</span> </a> </li> <li> <a href="" rel="nofollow"> <span>"JavaScript: The Definitive Guide"; David Flanagan; 2006</span> </a> </li> </ul> </div> <div class="no-print"><link type="text/css" media="all" rel="stylesheet" href="/css/citation.css"> <script src=""></script> <script type='text/javascript' src="/scripts/citation.js"></script> <div class="citation-widget"> <svg xmlns="" xmlns:xlink="" width="76px" height="76px" viewBox="0 0 76 76" version="1.1"> <title>bibliography-icon icon for annotation tool Cite this Article

About the Author

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.