bradley / Blotter

A JavaScript API for drawing unconventional text effects on the web.
https://blotter.js.org
Other
3.05k stars 209 forks source link

Very long text breaks if the Text is longer than the Viewport #60

Open anderle opened 3 years ago

anderle commented 3 years ago

Hey, there you should set the style property whiteSpace to "nowrap", otherwise the Block for very long texts breaks after the Viewport width.

// Determines size of text within the document given certain style properties

sizeForText : function(textValue, properties) { // Using a here may not be the best approach. In theory a user's stylesheet // could override the necessary styling for determining sizes below. With growing // support for custom tags in html, we may consider using them if this raises problems. var el = document.createElement("span"), size;

properties = this.ensurePropertyValues(properties);

el.innerHTML = textValue; el.style.display = "inline-block"; el.style.fontFamily = properties.family; el.style.fontSize = properties.size + "px"; el.style.fontWeight = properties.weight; el.style.fontStyle = properties.style; el.style.lineHeight = properties.leading; el.style.maxWidth = "none"; el.style.padding = this.stringifiedPadding(properties); el.style.position = "absolute"; el.style.width = "auto"; el.style.visibility = "hidden"; el.style.whiteSpace = "nowrap";