Wordwrap

[regoch]

Is there way in php to do thsi: I get news title from msql and if it to long to break it in two spans, to get

<h2>
  <span>Show unread posts since</span>
  <span>last visit.</span>
</h2>

from this

<h2>
  <span>Show unread posts since last visit.</span>
</h2>

So, if is h2 weight 100px to break up in two spans whats out of  that 100px.

[Adam]

This is a job for CSS, not PHP. All you need to do is wrap the content in a block element (DIV for example) and set your desired width.

[regoch]

Yes, but I can get it to work when I maualy put text in spans, I don't know how to automaticly break text in two or three spans.

[Adam]

You can break it per letter/word count, but unless you're using a monospaced font you have no way of knowing how much space a series of characters will take up. Going by letter/word count though you cannot accurately break up a string evenly. Why can't you use CSS - why do you need the text into separate spans?

 

[regoch]

http://www.galerija-sikirica.kus-sinj.hr/hr

 

wonna get that image text over image boxes but to get them automaticly, that on page ar adeed manualy.

[Adam]

You'll want to play around with the positioning and stuff, but take a look at this:

 

<style type="text/css">
div {
    width: 140px;
    padding: 10px;
    height: 100px;
    background: red;
}

span {
    background: yellow;
    line-height: 1.4em;
}
</style>

<div>
    <span>Some random text here</span>
</div>

[regoch]

I dont have problem with css, i wonna to split random text if it's to long in two or more spans, because I get tex from my sql and can slit it manualy. I hope you get where is my problem, sory about my english!

[Adam]

I understand you can split it, but I'm asking why not use CSS? Why does it need to be in multiple spans? I know you seem to want to use PHP but I'm just trying to suggest the best tool for the job here.

 

The problem with using PHP is it has no knowledge of the font size or the element it will be in. Using PHP means you have to try and break the string up into equal parts, but as words and even letters can vary in size it's not easy to achieve consistent results. Supporting another language adds another complication.

 

CSS on the other hand can work out exactly where to split the string and how many rows of text will be needed. Your biggest problem with PHP is deciding how many rows would be needed in order to fit the text evenly, and so how many splits are needed. You can't say x amount of characters or x amount of words can fit into one line, because it varies too much. You can fit far more l's into a line than W's. CSS can do all that though, extremely easy.

 

I'm not trying to be a dick by the way. If there's a good reason for needing to do it this way, I can explain how you'll need to approach it.

[regoch]

I try to do it because i wonna space beetwen two lines and every line to have auto height of text if there will be it. ANd I do it like you see on link page, but problem is how to do it automaticly for random text, I know how to di it in css like you se on link page pa do not know how to split in two or more spans if text is too long. I found something similar here but with java script

http://jsfiddle.net/aNUjB/14/

 

I wonna get something like in this tutorail but to separeta in two spans automaticly.

http://css-tricks.com/text-blocks-over-image/

[Adam]

<style type="text/css">
div {
    width: 288px;
    height: 192px;
    background: #C9C19C;
}

h2 {
    color: #FFFFFF;
    font-size: 16px;
    font-family: DejaVuSerifBook;
    line-height: 2.0em;
    margin: 0;
    padding: 10px 30px 10px 10px;
}

span {
    background: #EDA305;
    padding: 0;
}
</style>

<div>
    <h2>
        <span>This is an even longer string taking up about three rows</span>
    </h2>
</div>

 

This way works perfect, except that it doesn't have padding on the sides of the text. It's not a huge problem - take a look and see what you think. Don't forget to include your font face rules too:

 

@font-face {
    font-family: 'DejaVuSerifBook';
    src: url('/fonts/dejavuserif-webfont.eot');
    src: url('/fonts/dejavuserif-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/dejavuserif-webfont.woff') format('woff'),
         url('/fonts/dejavuserif-webfont.ttf') format('truetype'),
         url('/fonts/dejavuserif-webfont.svg#DejaVuSerifBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

[ManiacDan]

Ok, it might help if someone else says it:

 

You cannot know what "too long" means in PHP.  You can't.  Look:

 

WWWWWWWWWW <-- 10 Ws

IIIIIIIIII <-- 10 Is

 

See how those are drastically different widths?

 

Now, a CSS way is really the only good way to do this because the browser will know how wide the text it's drawing will be, and the browser can then determine line breaks and line height, both of which can be specified by CSS.

[regoch]

after all day googling and giving Adam trooble find out that this only work with sans fonts, so i change font to open sans and with that javascript get it woking!

http://jsfiddle.net/aNUjB/14/

 

Thank you!

[Adam]

Sans fonts? They are just fonts that don't add "serifs" (the little ticks on letter strokes) like Times New Roman does, for example. Think you meant mono-spaced fonts? I would advise against a JS solution though, simply because you're adding a dependency just to style the page correctly.

 

Good luck anyway.