0

I have spent hours reading and trying solutions to other people's wrapping problems and nothing is working.

I am using Crafty to build a game and want to display one line of instructions but no matter how I style the text it keeps wrapping at every space. If I take the spaces out, the whole sentence displays on one line. With spaces, each word is on its own line. I have tried float & white-space, align: justify, changing the coordinates, changing the font size, you name it. I am working in the JavaScript, not HTML. TIA

Here is what I have:

var helloWorldText = Crafty.e('2D, DOM, Text')
      .attr({
        x: 350,
        y: 10
      });
      helloWorldText.text("Click on the matching character.");
      helloWorldText.float(left);
      helloWorldText.whiteSpace(nowrap);
      helloWorldText.textColor('black');
      helloWorldText.textFont({
      size: '14px',
      textAlign: justify
      });
Hoang Subin
  • 6,610
  • 6
  • 37
  • 56
newtech
  • 1

1 Answers1

1

Setting a width (w) should allow your text to not wrap. For example:

var helloWorldText = Crafty.e('2D, DOM, Text')
    .attr({
        x: 10,
        y: 10,
        w: 400
    });

    helloWorldText.text("Click on the matching character.");
    helloWorldText.float(left);
    helloWorldText.textColor('black');
    helloWorldText.textFont({
        size: '14px'
    });

The "w" attribute comes from the CraftyJS 2D Component

John Harper
  • 135
  • 1
  • 7