How to Add Spaces in HTML Marquee Text

Written by kevin lee | 13/05/2017
How to Add Spaces in HTML Marquee Text
Scrolling text still captures the attention of Web surfers. (Internet image by Leticia Wilson from Fotolia.com)

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="tip"><h4>Tip</h4><p><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></p></div></div><div class="main-ad"> <script> var VIEWPORT_WIDTH = document.documentElement.clientWidth || document.body.clientWidth; var ad_height = (VIEWPORT_WIDTH > 500) ? '555px' : '456px'; </script> <ins id="ggads-12872004" class="adsbygoogle" style="display:inline-block;min-width:320px;max-width:1200px" data-ad-client="pub-2494113940073314" data-ad-slot="2945830674"> </ins> <script> document.getElementById('ggads-12872004').style.height = ad_height; (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><!-- UK_LINK --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2494113940073314" data-ad-slot="4611611435" data-ad-format="link"></ins> <script> window.setTimeout(function(){ (adsbygoogle = window.adsbygoogle || []).push({}); }, 1000); </script> <div id="tips-warnings"> <h4><span>Tips and warnings</span></h4> <ul> <li class="tip"><span>Note that the "" 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.</span></li> </ul> </div><div id="rcjsload_ef1821"></div> <script type="text/javascript"> (function() {var referer="";try{if(referer=document.referrer,"undefined"==typeof referer)throw"undefined"}catch(exception){referer=document.location.href,(""==referer||"undefined"==typeof referer)&&(referer=document.URL)}referer=referer.substr(0,700); var rcel = document.createElement("script"); rcel.id = 'rc_' + Math.floor(Math.random() * 1000); rcel.type = 'text/javascript'; rcel.src = "http://trends.revcontent.com/serve.js.php?w=69463&t="+rcel.id+"&c="+(new Date()).getTime()+"&width="+(window.outerWidth || document.documentElement.clientWidth)+"&referer="+referer; rcel.async = true; var rcds = document.getElementById("rcjsload_ef1821"); rcds.appendChild(rcel); })(); </script> <div id="references"> <h4><span>References</span></h4> <ul class="colorlist"> <li><a href="http://www.usg.edu/galileo/skills/ollc_glossary.phtml" class="no-ajaxy" target="_blank" rel="nofollow">University System of Georgia: Online Library Learning Center Glossary</a></li> <li><a href="http://www.ffiec.gov/ffiecinfobase/booklets/e_banking/ebanking_04_appx_b_glossary.html" class="no-ajaxy" target="_blank" rel="nofollow">Federal Financial Institutions Examination Council: E-Banking</a></li> <li><a href="http://www.w3schools.com/html/html_entities.asp" class="no-ajaxy" target="_blank" rel="nofollow">W3Schools: HTML Entities</a></li> <li><a href="http://www.w3.org/TR/html5/obsolete.html" class="no-ajaxy" target="_blank" rel="nofollow">World Wide Web Consortium: 11 Obsolete Features --- HTML5</a></li> <li><a href="http://books.google.com/books?id=2weL0iAfrEMC&pg=PT230&lpg=PT230&dq=javascript+replace+global+gi++-blog+-blogs+-%22how+can+I%22+-%22how+do+I%22+-%22how+do+you%22+-%22what+is%22+-%22can+anyone%22+-youtube&source=bl&ots=_81AsD--9I&sig=TGPEqsRViSA3kpH7gARY2cQhM74&hl=en&ei=1s2STK-iDoPGlQeUr_CqCg&sa=X&oi=book_result&ct=result&resnum=31&ved=0CL8BEOgBMB4#v=onepage&q=javascript%20replace%20global%20gi%20%20-blog%20-blogs%20-%22how%20can%20I%22%20-%22how%20do%20I%22%20-%22how%20do%20you%22%20-%22what%20is%22%20-%22can%20anyone%22%20-youtube&f=false" class="no-ajaxy" target="_blank" rel="nofollow">"JavaScript: The Definitive Guide"; David Flanagan; 2006</a></li> </ul> </div> <div id="resources"> <h4><span>Resources</span></h4> <ul class="colorlist"> <li><a href="http://www.tutorialspoint.com/html/html_marquee_tag.htm" class="no-ajaxy" target="_blank" rel="nofollow">Tutorials Point: HTML Marquee Tag</a></li> </ul> </div> <div id="article-comments"></div> </article> <aside id="sidebar"> <!-- atyp-gpt-300x250 --> <div id="300x250_300x600" class="gpt_300"></div><!-- UK_LINK --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2494113940073314" data-ad-slot="4611611435" data-ad-format="link"></ins> <script> window.setTimeout(function(){ (adsbygoogle = window.adsbygoogle || []).push({}); }, 1000); </script> <div id="slidepromo" class="slidepromo300 FLC"> <a href="http://www.ehow.co.uk/how_8637131_use-marquee-outlook.html" style="background-image:url('http://img.aws.ehowcdn.com/intl-248x150/ds-photo/getty/article/51/59/med233031.jpg');" > <span class="slideshowicon"></span> <h3 class="slideshowribbon">Editors’ pick</h3> <span class="ribbonshadow"></span> <span class="shwtitle">How to Use Marquee in Outlook</span> </a> <div class="shadow"></div> </div> <div id="popular-rc" class="popular-rc rc2rc FLC" data-link-module="rc_right_rail"> <h3>You may also like…</h3> <ul class="colorlist"> <li> <a href="http://www.ehow.co.uk/how_6008798_change-font-size-java-script.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/130/15/fotolia_1374799_XS.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Change Font Size in Java Script</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_5876061_strike-through-text-microsoft-outlook.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/getty/xc/89689958.jpg?v=1&c=EWSAsset&k=2&d=910C62E22B9F47AA5BB869CF8BDC704038DDBF11F77465BE3B9D896E1F889BA6" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Strike Through Text in Microsoft Outlook</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_5873866_change-marquee-text-color-html.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/51/163/fotolia_2053760_XS.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to change marquee text color in html</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_8596489_set-margins-illustrator.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/getty/article/167/24/90310822.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Set Margins in Illustrator</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_8425821_make-circular-text-openoffice.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/getty/article/165/230/86520917.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Make Circular Text in OpenOffice</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_6800824_make-text-glow-html.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/227/124/fotolia_2692394_XS.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Make the Text Glow in HTML</span> </a> </li> <li> <a href="http://www.ehow.co.uk/how_8455282_edit-3d-text-sketchup.html" class="photo-rc" data-gtm-event="rc_right_rail"> <img src="http://img.aws.ehowcdn.com/intl-98x73/ds-photo/getty/article/154/5/87475986.jpg" height="73" width="98" data-gtm-event="rc_right_rail"> <span data-gtm-event="rc_right_rail">How to Edit 3D Text on SketchUp</span> </a> </li> </ul> </div> <!-- atyp-gpt-160 --> <div class="gpt_160"></div> </aside> <div class="lowerclosexwrap"> <span class="closex botx icon-closex" data-gtm-event="articleClose"></span> </div> </div> </div> </div> <!-- /#content --> </div> </div> <!-- /#page --> <!-- #options --> <div id="options" class="clearfix"> <section id="filters" class="ui-section"> <div class="option-container"> <h5>Filter:</h5> <ul class="option-set" data-option-key="filter"> <li data-filter=".thumbnail" class="selected todo" data-gtm-event="navFilter" data-gtm-info="All types">All types<span class="filter-loading"></span></li> <li data-filter=".filter-article" data-gtm-event="navFilter" data-gtm-info="Articles">Articles<span class="filter-loading"></span></li> <li data-filter=".filter-slideshow" data-gtm-event="navFilter" data-gtm-info="Slideshows">Slideshows<span class="filter-loading"></span></li> <li data-filter=".filter-video" data-gtm-event="navFilter" data-gtm-info="Videos">Videos<span class="filter-loading"></span></li> </ul> </div> </section> <section id="sorting" class="ui-section"> <div class="option-container"> <h5>Sort:</h5> <ul class="option-set sort-by" data-option-key="sort"> <li data-sort="sortrelevant" ascending="true" class="selected" data-gtm-event="navSort" data-gtm-info="Most relevant">Most relevant<span class="filter-loading"></span></li> <li data-sort="sortlikes" ascending="false" data-gtm-event="navSort" data-gtm-info="Most popular">Most popular<span class="filter-loading"></span></li> <li data-sort="sortrecent" ascending="false" data-gtm-event="navSort" data-gtm-info="Most recent">Most recent<span class="filter-loading"></span></li> </ul> </div> </section> </div> <!-- /#options --> <div class="contain-fluid clearfix"> <div class="row-fluid"> <div class="message-div"> <div class="message-container"> <p class="no-articles">No articles available</p> <p class="no-slideshows">No slideshows available</p> <p class="no-videos">No videos available</p> </div> </div> <ul id="container" class="thumbnails infinite-scrolling"> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/51/59/med233031.jpg"> <span class="art-title">How to Use Marquee in Outlook</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/130/15/fotolia_1374799_XS.jpg"> <span class="art-title">How to Change Font Size in Java Script</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/getty/xc/89689958.jpg?v=1&c=EWSAsset&k=2&d=910C62E22B9F47AA5BB869CF8BDC704038DDBF11F77465BE3B9D896E1F889BA6"> <span class="art-title">How to Strike Through Text in Microsoft Outlook</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/51/163/fotolia_2053760_XS.jpg"> <span class="art-title">How to change marquee text color in html</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/167/24/90310822.jpg"> <span class="art-title">How to Set Margins in Illustrator</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/165/230/86520917.jpg"> <span class="art-title">How to Make Circular Text in OpenOffice</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/227/124/fotolia_2692394_XS.jpg"> <span class="art-title">How to Make the Text Glow in HTML</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/154/5/87475986.jpg"> <span class="art-title">How to Edit 3D Text on SketchUp</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/77/149/78528797.jpg"> <span class="art-title">What Does it Mean to Justify a Document in Microsoft Word?</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-cdn-write/upload//image/74/C9/2B55BC24-EBDE-40FB-86D9-B57760DEC974/2B55BC24-EBDE-40FB-86D9-B57760DEC974.jpg"> <span class="art-title">How to add an expandable text box in a word document</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/51/3/fotolia_3610571_XS.jpg"> <span class="art-title">How to merge word documents in vba</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-cdn-write/upload//image/E7/40/D48F0B08-FBA8-4974-BB3E-1F435D1D40E7/D48F0B08-FBA8-4974-BB3E-1F435D1D40E7.jpg"> <span class="art-title">How to Format Text to Fit a Shape in MS Word</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/187/26/fotolia_10975563_XS.jpg"> <span class="art-title">How to Use Istext in VBA</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/117/212/80609369.jpg"> <span class="art-title">How to convert text to polyline autocad</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-cdn-write/upload//image/85/22/F6B1E5D2-2ECB-44F5-99EF-8E3C42472285/F6B1E5D2-2ECB-44F5-99EF-8E3C42472285.jpg"> <span class="art-title">How do I rotate a text box in word 2007?</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/220/249/fotolia_2331711_XS.jpg"> <span class="art-title">How to Remove a Blank Page in Word in VBA</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/51/152/fotolia_4360253_XS.jpg"> <span class="art-title">How to Flip Words Upside Down</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/114/132/80403526.jpg"> <span class="art-title">How to Calculate Standard Deviations in Excel Visual Basic</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/84/24/AA053785.jpg"> <span class="art-title">How to do cross outs & bolds on tumblr</span> </a> </li> <li class="pthumbnail"> <a class="thumbnail gridzipd smallthumb no-ajaxy" href="" data-cis-image="http://img.aws.ehowcdn.com/intl-200x130/ds-photo/getty/article/56/4/51329284.jpg"> <span class="art-title">How to Justify Text in PowerPoint</span> </a> </li> </ul> </div> </div> <nav id="page_nav" style="margin-left:-1000px;"> <a href="//www.ehow.co.uk/partial/how_7189813_add-spaces-html-marquee-text.html?template=grid&page=1" rel="nofollow"></a> </nav> <footer id="footer" data-section="footer" class="container-fluid"> <div class="row"> <div id="thefoot" class="hidden-md-up"> <nav class="navbar"> <form class="form-inline pull-xs-right searchbox" action="//www.ehow.co.uk/search.html"> <input class="form-control search" type="text" name="q" class="text" autocorrect="on" autocomplete="on" placeholder="Search"> <button data-gtm-event="navFooter" data-gtm-info="search" class="btn btn-default icon-magnifying_glass" type="submit"></button> </form> </nav> </div> </div> <div class="row footer-links"> <div class="col-xs-12 col-md-4 footer-list"> <ul> <li> <a href="//www.ehow.co.uk/about.html" data-gtm-event="navFooter" data-gtm-info="About us"> About us </a> </li> <li> <a href="//www.ehow.co.uk/privacy.html" data-gtm-event="navFooter" data-gtm-info="Privacy policy"> Privacy policy </a> </li> <li> <a href="//www.ehow.co.uk/terms-of-use.html" data-gtm-event="navFooter" data-gtm-info="Terms of use"> Terms of use </a> </li> <li class="hidden-sm-down"> <a class="no-ajaxy" id="_bapw-link" data-gtm-event="navFooter" data-gtm-info="Ad Choices"> <img id="_bapw-icon" src="http://cdn.betrad.com/pub/icon1.png" /> <span>Ad Choices</span> </a> <abbr>en-GB</abbr> </li> </ul> </div> <div class="col-xs-12 col-md-4 footer-social"> <span class="hidden-sm-down">Follow us</span> <ul class="social-list"> <li> <div class="icon-wrapper pinterest"> <a data-gtm-event="navFooter" data-gtm-info="Pinterest" href="//www.pinterest.com/ehowuk/" class="icon-social-pinterest" target="_blank"></a> </div> </li> <li> <div class="icon-wrapper facebook"> <a data-gtm-event="navFooter" data-gtm-info="Facebook" href="//www.facebook.com/pages/eHow-UK/277465478985907" class="icon-social-facebook" target="_blank"></a> </div> </li> <li> <div class="icon-wrapper twitter"> <a data-gtm-event="navFooter" data-gtm-info="Twitter" href="//twitter.com/eHowUK" class="icon-social-twitter" target="_blank"></a> </div> </li> <li> <div class="icon-wrapper gplus"> <a data-gtm-event="navFooter" data-gtm-info="GooglePlus" href="//plus.google.com/+ehowuk/posts" class="icon-gplus" target="_blank"></a> </div> </li> </ul> </div> <div class="col-xs-12 col-md-4 footer-logo"> <div class="dm-logo"> <a data-gtm-event="navFooter" data-gtm-info="dm logo" href="http://www.leafgroup.com/" target="_blank" class="company-logo"> <img alt="company-logo" src="//www.ehow.co.uk/ui/images/leafgroupltd.png"> </a> <p class="copyright">© 1999-2017 Leaf Group, Ltd. / Leaf Group Media</p> </div> </div> </div> </footer> <script defer src="http://cdn.jsdelivr.net/webjars/org.webjars/isotope/1.5.26/jquery.isotope.min.js"></script> <!--[if lt IE 9]> <script src="//www.ehow.co.uk/scripts/site.min.js?v=20171206151300280978"></script> <![endif]--> <![if (!IE)|(gte IE 9)]> <script defer src="//www.ehow.co.uk/scripts/site.min.js?v=20171206151300280978"></script> <![endif]> <script defer src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> <script async defer data-pin-hover="true" data-pin-color="red" data-pin-tall="true" data-pin-build="parsePins" src="//assets.pinterest.com/js/pinit.js"></script> <noscript> </noscript> <div id="cookiesdirective"> <div id="cookiesdirective-container"> <p>By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our <a href="//www.ehow.co.uk/cookies.html">Cookie policy</a>.</p> </div> </div> <input name="referrer" type="hidden" value="" rel="nofollow" /> <div id="fb-root"></div> <!-- atyp-gpt-oop --> <div class="gpt_outpage"></div> </body> </html>