GSAP splittext div's auto width

[niiku23]

Hi,

 

I am using GSAP Splittext to split a DIV (with auto width set in css) full of copy onto lines. I would like the subsequent DIVs that Splittext creates to auto size to the widths of the copy lines contained within them. I thought split text does this automatically but all of the divs that are made appear to be the same width as the widest piece of copy. Grateful for any help?

 

Thanks,

 

Nick

 

JS:

var cta_text_1 = document.getElementById("cta");
var split_cta_text_1 = new SplitText(cta_text_1, {type:"lines", linesClass:"textLine++"});

 

CSS:

.cta{
  position:absolute;
  font-size: 18px;
  text-align: center;
  height:auto;
  width:auto;
  left:0px;
  top:0px;
  color: #fff;
 border: 1px solid #999;
}

.textLine1 { 
  width:auto;
  border: 1px solid #7f7f7f;
}

.textLine2 { 
  width:auto;
  border: 1px solid #7f7f7f;
}

 

[Jonathan]

Hello @niiku23 and Welcome to the GreenSock Forum!

 

Sorry your having this issue! To better help you can you please create a reduced codepen demo example so we can assist you by seeing your code in context. This will allow us to visualize what you are seeing

 

 

Thanks

[GreenSock]

Yeah, like @Jonathan said, a demo would be helpful, but if your goal is to just re-size those DIVs after the split, maybe try this:

 

TweenLite.set(yourSplit.lines, {width:"auto"});

 

Does that help at all? (I may have misunderstood your question)