Support » Fixing WordPress » CSS to wrap horizontal scrolling text

  • Hi everyone,

    I have the horizontal scrolling text plug-in. What I would like to do is set CSS to it will automatically wrap the text at the end so you don’t see empty space while it recycles to the first set of text. Is this possible/does anyone know how to do this?

    My site is tmmslynn.com

    Thank you very much

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hello, put this code at the bottom of your themes CSS file.

    /*Fix text alignment issues*/
    pre,p,h1,h2,h3,h4,a {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
    }

    Good Luck.

    Just be aware that if you edit your theme’s stylesheet directly, you’ll lose those changes if the theme is ever updated in the future, to fix bugs or security issues or to add new features. Better to use a custom CSS plugin or your theme’s built-in custom CSS option, if one exists.

    I pasted that code into the bottom of my edit CSS area and it did not work. Any other suggestions?

    Which plugin are you using to generate the marquee? Have you spoken to the plugin’s authors or posted to their support forum?

    I am using Horizontal Scrolling Announcement. I posted on their forum but haven’t heard anything. Someone said to put a br tag but I don’t know what that is.

    br is used to make a line break in html, like go to next line in text.

    It helps a little, as you can see here: http://jsfiddle.net/3cmpqr0u/ The issue, though, is that a <marquee> won’t repeat until all of the text has scrolled off the screen(*), and I don’t believe there’s a way to change that behavior.

    (*) You can see that the first sentence disappears from view very early and you don’t see it again until the longer sentence completely disappears.

    Just checked the jsfiddle, to be honest I’m a bit puzzled.

    What I can add is <marquee> is disregarded by most webdesigners, because there are almost no controls with it (no speed, time, basic settings to tweak).

    What I meant is that using the <br> tag within the <marquee> tag will let a user see more of the information at once. To the best of my knowledge, there is no way to fix the exact issue that the OP is having, but using the <br> tag in that way might make for a better user experience.

    Ok now I understand,

    If what you need is just more space between lines, this will do, and with a better control than br. Using vertical padding can also help. You can also use same technique to trick lines with horizontal padding, let’s say:

    <marquee style="line-height:30px;">
        <span style="padding: 0 0 0 20px;"Here's some text.</span>
        <span style="padding: 0 0 0 40px;">Here's a much much much much much much much much longer piece of text.</span>
    </marquee>

    Padding works the following way in CSS: top right bottom left (0px 0px 0px 0px). Obviously, it will not solve your issue, but can help soften it.

    Hope it helps,

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS to wrap horizontal scrolling text’ is closed to new replies.