1

I have used code form here: Overflowed text with html in another div - to get text to flow over in a new div. However, now I have formatting issues with the text. The first word of every paragraph is somehow followed by a line-break.

You can see an example here: http://jsfiddle.net/hm2yfw61/9/

 var currentCol = $('.box:first');
 var text = currentCol.html();
 currentCol.html('');
 text = text.replace(/ (?![^<>]*>)/gi, '%^%');
 var wordArray = text.split('%^%');



 $.fn.hasOverflow = function () {
     var div = document.getElementById($(this).attr('id'));
     return div.scrollHeight > div.clientHeight;
 };


 for (var x = 0; x < wordArray.length; x++) {
     var word = wordArray[x];
     currentCol.append(word + ' ');
     if (currentCol.hasOverflow()) {
         currentCol = currentCol.next('.box');
     }
 }

Does anyone know how I can fix this?

Thanks.

-----UPDATE: I've updated the jsfiddle with the working solutions suggested in reference for others who may face similar problems ------

Community
  • 1
  • 1
Tngld
  • 153
  • 13
  • Thanks for the input @Regent, I was not aware of this. However when I tried to alter the code like you suggested, the overflowing of text to new div broke. Maybe I did something wrong, my java is unfortunately not fluid. – Tngld Oct 20 '14 at 05:52
  • Yes, sorry, it has to be `var div = this[0];` I don't know whether your Java is fluid or not, but your **JavaScript** is not so bad. – Regent Oct 20 '14 at 06:01
  • Thanks @Regent, now it don't break :) What exactly does this change do? Is it only to get tidyer code, or do it have other functionality as well? – Tngld Oct 20 '14 at 06:24
  • No functionality, just tidier code. Taking element's id and searching for element with id (which is the original element) is... strange :) – Regent Oct 20 '14 at 06:32
  • Ok, thanks for the heads-up here @Regent. +1 :) – Tngld Oct 20 '14 at 06:35

1 Answers1

1

This might be a bit hacky, but try the following:

  1. Add the following CSS rule

.box > p:first { display: none; }

  1. Add "nbsp; " (including the space) at the beginning of each string in .box > p tags.

    <p>&nbsp; Jumo handango

Updated Fiddle

Walter Roman
  • 4,621
  • 2
  • 32
  • 36
  • Thanks for the quick response Walter, but when altering `:first` to `:first-of-type`the overflowing of text to new div broke. Did it do that when you tested also? – Tngld Oct 20 '14 at 05:49
  • Thanks @Walter-Roman, this solved the line-break issue. However, I dropped the `.box > p {display: none;}`from the CSS, as this removed all paragraph spacings. I also added `p { margin-top: -30px; }` to get less sepace between paragraphs. – Tngld Oct 20 '14 at 06:29
  • Sorry again! I meant for that css rule to be `.box > p:first` – Walter Roman Oct 20 '14 at 06:47
  • Thank! Now that css rule did not break the spacing. But exactly what does this do? The result seems to be the same both with and without this rule as oong as I add   to the

    .

     – Tngld Oct 20 '14 at 07:00