PHP/MySQL Limit Characters - php

Question

Below is a preview of what I am dealing with:
The heading, the text, and the image is all dynamically created based on the user. They can choose if they want to add a picture, and they can choose what text to put in the heading and the main content.
There cannot be any scrolling, so it has to be visible and cannot go past the bottom of that white.
My question is... how can I limit the text of the body?
If the heading is large and goes down to two lines, and there is a picture, then in order to stay in the lines and not go past the white it has to be limited to a certain amount of characters.
But another user could decide to not have a picture and keep the heading in one line, so that user will have more text to write so the limit should be different.
I guess the confusing part for me is like.. what if a user has no picture and has a short heading, and creates some really long text to fit the size, but then later on decides to add an image.. then that long text will now no longer fit. So now.. I can't limit the text because it's already there.
I hope that makes sense. If anyone could help me through this and give me some ideas I would really appreciate it.

Answer 1

Use this for whatever the user input is for adding text. It could limit the characters they use just change the 250 value.
<script>
function countChar(val){
var len = val.value.length;
if (len >= 250) {
val.value = val.value.substring(0, 250);
}else {
$('#charNum').text(250 - len);
}
};
</script
<textarea id="field" name="description" onKeyUp="countChar(this)"></textarea>

Answer 2

its not only the text you need to limit but also the image thumbnail so that affect the style of your webpage
To limit the number of string .. i would you use a script form here php trim a string
function trim_word($str, $length, $suffix = '...')
{
$len = strlen($str);
if ($len < $length) return $str;
$pattern = sprintf('/^(.{%d,}?)\b.*$/', $length);
$str = preg_replace($pattern, '$1', $str);
$str = trim($str);
$str .= $suffix;
return $str;
}
it trim the text and makes sure it always ends with a word ...
You can use http://phpthumb.sourceforge.net/ to generate thumbnail of fixed size all you need to do it set your desired height and width

Answer 3

There are a few different options to consider. You may want to limit the amount of text the user can enter for starters, to ensure it doesn't overflow.
One thing I would probably do is find the maximum amount of characters you're comfortable with on the page, and use substr on the output from the database to ensure that it never displays more.
http://php.net/manual/en/function.substr.php
You could have a "more" link that way the visitor could read more if they want, but it doesn't break the layout. I would use basic if statements for the logic (if picture exists, trim text to this, if not etc).
Hope that helps.

Answer 4

Surround the entire thing with a container div of the fixed height which you desire with no padding, and inside that place another inner div with no margin and no fixed height, then as the user changes the content create a javascript function to check if the inner div is < the container div; and if not then do not allow the user to make that change - this way you are attacking the problem directly.
<script>
function checkDivs() {
if(inner.style.height >= container.style.height) {
//prevent change
}
}
</script>
<div id='container'>
<div id='inner'>
//User-defined content
</div>
</div>
This function would be attached to whatever GUI the user would edit the content through, as for how to prevent the change, I'd have to know more about your program.