Geek asks and answers

CSS - Wrapping Text Along a Corner

I'm trying to wrap text at an angle. This illustrates what I'm trying to do better than I can describe this:

http://bdub.ca/angle.png http://bdub.ca/angle.png

I found a solution here , but the worm of a large number of empty floating divs is used to create the effect. I will need to do this several times on the page, so it would be better to have a solution that is lighter in weight. JavaScript is fine, if that is something that I can just run on the page load to save the DOM from overloading additional elements.

My brainstorming session for JS went so far as to try to figure out how to wrap each line in the gap and set the left margins of the spans in sequence. The caveat is that text is a paragraph that will be automatically wrapped for placement in a container. Unfortunately, I can’t ask my client to insert line breaks from Wordpress, so for wrapping each line in the gap there will be a way to detect automatic line breaks using javascript.

Any suggestions?

+5
source share
2 answers

, ( w3c, ) . , . ( b4)

css:.paraIncrement {font-size: 12pt; }

javascript, psudo-code :

outputstr[] = array();
int index = 0;
int startmax = 80;
int innerCount = 0;
for (int i = 0; paragraph.length; i++) {
   outputstr[index] += paragraph[i];
   innercount++;
   if (innercount == startmax) {
      startmax -= 5; // how much you want the indent to shrink progressively.
      innercount = 0;
      index++;
   }
}
for (int i = 0; i < output.length(); i++) {
   echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>';
}

, 80 , 5. , , , , css.overflow /.

+2

( ), , .

0

More articles:


All Articles