A-frame.js long a-text value overflow issue

Question

I'm working on a-frame based project. I've been struggling with the a-text length. Here is the minimal demo. As you can see the text is overflowing the parent panel. I want to add some sort of scroll on in the overflowing text. I was able to make a scroll like behavior with the help of this blog post, however the text remains visible outside the parent panel.

Answer 1

The text value shouldn't dissapear outside the parent panel. The only thing the parent is doing here, is setting a relative transform (providing: position, rotation, and scale). It will not make invisible things outside of its bounds.

---

The blog post describes hiding the text within a roof and a floor (Hiding the Article section). Since you have a photosphere, it would be a shame to throw in any covering elements (being the roof + ceiling).

You can use the order of rendering.

If we throw in an invisible plane, and tell it to render before the text, it will seem like only a partion is displayed.

<a-entity text="long text"></a-entity>
<a-plane position="0 -0.3 0.1" width="4" rotation="0 -90 0" 
         material="transparent: true; opacity: 0; alphaTest: 0"></a-plane>

Check it out in this fiddle.

---

Here you have a fiddle with the scroll, if you scroll it a bit, you'll see the text showing back.