Sunday, 6 September 2020

Fabric.js - how to create TextBox without line breaks?

I was searching a lot for properties like maxLines, noWrap, splitByWhitespace, etc. in Fabric.js documentation, but they don't exist. Do you know a working solution to disable text wrapping inside fabric.Textbox?

my code:

const text = new window.fabric.Textbox('expected single line', {
  fontFamily: 'Nunito Sans',
  fontWeight: 400,
  fontSize: 15,
  originX: 'center',
  originY: 'center',
});

const border = new window.fabric.Rect({
  rx: 10,
  ry: 10,
  fill: '#999999',
  height: text.height + 10,
  width: text.width + 100,
  originX: 'center',
  originY: 'center',
});

const group = new window.fabric.Group([border, text], {
  originX: 'left',
  originY: 'top',
  hasRotatingPoint: false,
  height: 42,
  width: 200,
  top: 167,
  left: 50,
});
canvas.add(group);

actual result demo:

multiline textbox

as you can see there are line breaks on every whitespace, but I want to have a single-line text with spaces. interestingly, if I replace whitespaces with underscore _, I get one-line text.

demo:

one-line textbox



from Fabric.js - how to create TextBox without line breaks?

No comments:

Post a Comment