I have a column where some users are not entering spaces (i.e.: .........................................) and it is stretching my TD column.
Is there a way to force line breaks in html with a simple option? If not, I think I am going to have to break the line up myself, which would not be optimal, as I would have to determine the best places to break a line, and I don't want to do that.
I am looking for something that will work in the 3 main browsers (ie/firefox/safari)
Here is my code:
<td valign="top">
<br>
<strong><?php echo $common->stripHtml($row['one_liner']); ?></strong>
<br>
<hr>
<?php
if (strlen($row['self_description']) > 240)
{
echo substr($common->stripHtml($row['self_description']), 0, 240)."... <a href='viewprofile.php?i=".$row['user_id']."'>more</a>";
}
else
{
echo $common->stripHtml($row['self_description']);
}
?>
</td>
A fixed-width cell combined with hiding overflow content should do the trick
The CSS:
table {
table-layout:fixed;
}
table td {
overflow:hidden;
}
Targeting this HTML:
<!-- This width specification ought to be in the top-most <td> or <th> -->
<td width="100" >...</td>
While you could manually add line breaks with PHP, you can also use the "overflow" CSS property to determine how the cell should display its data.
If you set the overflow to "auto", a scrollbar should appear within the cell, and if you set the overflow to "hidden", the contents will be hidden beyond the width you have set.
"as I would have to determine the best places to break a line, and I don't want to do that."
You've hit the nail on the head there, HTML is equally unable to determine the best place to break the line. Maybe as you know the likely values you can determine a set of rules for allowing breaks.
I would choose a fixed width font to display the text and then insert a break after a fixed number of chars.
You could use the CSS overflow property on the table cell, but this will not force a line break.
You could insert some
entities, but browser support is patchy.
The best solution would be a regex to break up any continuous sequence of 20 characters by inserting a space. It won't look pretty, but it's better than throwing it all out of line.
No css property can break lines without white spaces.
By combining a "width:xxx", an "overflow:hidden" and a "table-display:fixed", you can hide unwanted content in your cells.
Another "fix" could be to use Javascript. When that particular input-element's .blur() event is raised, insert breaks at every xth char, or after every xth word. I personally wouldn't call this a "great" solution though.
Then again, I'm assuming you have the ability to monitor the submissions coming through your site. If this is the case, then you can manipulate the data via PHP/C# - which would be the ideal method.
Use fixed width cells?
<td valign="top" width="100px">
Related
I am reading a string my user is inputting via PHP and I need to spit it back out in a div tag. This div tag has a width of 500px. If the user enters a word that is too long, the word will overflow the container. If the user enters two words that are almost two long, it will split into two lines.
My question is how do I determine if a word is too long or not? I have tried setting a character count, which is not an accurate representation of length as certain characters (ie W and I) have different widths. Is there a solution?
My current algorithm is to break the user input into chunks, each of 40 characters, and output it.
If you want to still implement your character count mechanism you can; you just need to make sure your text is mono-spaced (same width). To do this you can just add <pre></pre> around your text block; this can also be accomplished with <code></code> and <tt></tt> but if you want a simple CSS solution you could use.
<style>
.myclass { word-wrap:break-word; }
</style>
<p class="myclass">some text</p>
Usually you shouldn't use PHP for things like that. Try CSS instead:
.break { word-wrap: break-word; }
will do the trick
you can simply break-up words that are larger than, say, 20 characters - into chunks, using the <wbr> tag. Here's some more info: http://motyar.blogspot.co.il/2011/07/tell-browser-they-may-break-your.html
I'm echoing a series of HTML elements using PHP. I'm using \n to cause code line breaks to make the source code more organized and legible.
For some reason, the use of \n in a specific location is causing a mysterious gap between the HTML elements. In firebug, this gap is not showing up as a margin, or padding, but rather just a gap.
Here is the PHP in question:
Note: As you can see, I have removed all of the PHP inside the tags as I'm pretty sure it is not relevant to this problem.
echo '<ul ... >'."\n";
while($row = mysql_fetch_assoc($result_pag_data)) {
echo '<li><a ... >'."\n".
'<img ... >'."\n".
'</a></li>'."\n"; <---- THIS IS THE \n THAT SEEMS TO BE CAUSING THE GAP
}
echo '</ul>'."\n";
Have you ever seen anything like this before, a presentation gap associated with PHP line breaks?
If so, what is the reason for it?
Is it really that important that I use \n in my code?
That's normal. A \n line break has no meaning in HTML, so it's interpreted as a space character. If you don't want that gap, then eliminate the \n, or rewrite the html so it's not relevant:
<li><a ...><img ...></a></li>
As a general rule, tags which can contain text should never have their closing tags on a line by themselves, for this very reason.
Following up on your 'where to put \n' question. This comes down to personal preference, but I tend to format my html like this:
<table>
<tr>
<td><a href="some big long ugly url">
<img ....></a></td>
</tr>
Since <tr> can't contain any text on its own (in valid html), it's ok to put on its own line. But the </a> and </td> are both tags that CAN contain text, so I put them right up against the end of the 'text' (the img tag in this case), so that the Phantom Linebreak Menance (coming soon to a starwars ripoff near you) can't strike.
Note, of course, that my example does have a line break and indentation between the opening <a> and the <img> tag, so that's another place where a "must be right next to each" other layout would cause a gap. If you need a series of things lined up smack dab against each other, than you basically can't use line breaks anywhere in that section of the page.
The whitespace is translated into (empty) HTML text nodes, which take up some space (you can test this by walking the DOM). There is no solution to make these disappear that I know of other than removing the whitespace from your HTML in the first place.
Of course it's not only \n that would cause this behavior; spaces or tabs would do exactly the same as well.
In that particular case the newlines are used to prettify the html source, keep it readable via view-source. That's quite common actually. (Yet redundant.)
As said by the other answers, it does not have meaning normally. Albeit this can be overriden via CSS and the attribute (which we can assume is not the case here):
white-space: pre-line;
You should only output a newline where you in fact want a newline in the output. In HTML, a newline is whitespace, just like the space character.
I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!
Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).
I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.
Is there any suggestions to do that ?
You can skew the containing div
.holder{
transform:skew(-40deg);
}
<div class="holder">
<span class="rotate">Just </span>
<span class="rotate">Like</span>
<span class="rotate">This! </span>
</div>
and then unskew each word inside it.
.rotate {
transform: skew(40deg);
}
https://jsfiddle.net/dcst94sv/5/
There's a very easy way to do this with CSS. Create a list. Then use li::before to add left-side padding to the list items. Set the li::before element to be a tall and thin block floated to the left. Each one will create left side padding for its parent list item and all those below it.
Like this:
li::before {
content: "";
display: block;
float: left;
height: 50px;
width: 10px;
}
<ul>
<li>sancti et dilecti</li>
<li>viscera misericordiae</li>
<li>benignitatem </li>
<li>humilitatem</li>
<li>modestiam</li>
<li>patientiam</li>
<li>caritatem</li>
</ul>
To count the number of words within the paragraph excluding HTML tags, use:
$tagless_content=strip_tags($content);
str_word_count($tagless_content);
Update
Here is code to increase text-indent via jQuery
jQuery.fn.stripTags = function() {
return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};
then use the String.length JavaScript property
var len = $('<p>').stripTags().length();
for(var i=0;i<len;i++)
jQuery('<p>').css('text-indent',+i+'px');
Reference
Strip tag via jQuery
strip_tag PHP function
str_word_count PHP function
There's no straight-forward solution that I am aware of, since, as you indent each line of the text more and more, the length of space that each line can take up will decrease, creating new lines.
For example:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
Post-indentation:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEX
T
TEXTTEXTTEXTTE
XT
TEXTTEXTTEXTT
EXT
TEXTTEXTTEXT
TEXT
This problem will exist if (1) you are processing lines created due to word wraps, and (2) if you detect all of the lines at once and then do all of your indents (as opposed to an algorithm that updates the <p>'s text. If the font family is mono-spaced font, then this can be adjusted for.
Best-case scenario is that these are <br>-terminated lines, in which case this would be very easy.
Slightly more difficult would be doing this with a mono-spaced font.
Worst-case scenario, describe above, would require searching for the first line that is not indented, then indenting it, updating the <p>'s text, and then repeating the process until the text is completely gone through or if the amount of indention exceeds with width of the <p>.
I would suggest asking your question again, providing the following information:
- are the lines terminated with <br> tags, or are they word-wrapped? If it is word-wrapped, is the font mono-spaced or variable-width?
After many Searching stuff I found something useful http://www.csstextwrap.com/examples.php
I think after some modifications it will fit my requirements. thanks for your highly appreciated Responses.
When building websites I'm forever chopping up strings to make them display nicely as headings and paragraphs. I use the substr function to chop-off unwanted characters and then add in ellipses. For example:
if ( strlen ( $mystring ) > 22 ) {
echo substr( $mystring,0,21 ).'...';
} else {
echo $mystring;
}
This works pretty good most of the time, but it is far from perfect. Check out how the shortened headings look on one of my sites. You can clearly see a lot of inconsistency in how the shortened headings look.
Surely, there is a better PHP method/ technique?
Your problem is that normal fonts are not monospaced, i.e. the various letters have different widths. Because PHP can't tell the final width of the resulting string in the browser, it is impossible to tell what position one needs to cut the string at.
There are jQuery based solutions for this (jQuery, running in the browser, does have access to the actual width information. #Dan shows a plugin in his answer); the downside of this of course is that it won't work without JavaScript.
If you want to invest the time, it would be possible to use GD's imagettfbbox() to calculate the approximate boundary using a common font like Arial. That would be far from perfectly reliable, but should give you a rough idea where to apply the cut.
No, because PHP doesn't know anything about how the text is going to end up rendered in the browser. Other people aren't even seeing the same thing you are for the same HTML, so how can changing the HTML your PHP generates fix this?
The only way to get consistent length text is to do the adjustments on the client side.
Something like the jQUery Ellipsis plugin:
http://plugins.jquery.com/plugin-tags/ellipsis
Edit: My bad, you want ellipsis... Your ellipses looks fine on that page you showed...
If you Really want them to line up you could put the text in an inline element with max width such and such and overflow: hidden followed by a seperate element with the ellipsis.
Another way is play around with CSS. You don't cut your text (or you just shorten it a bit if it's very long) and then you place it in a fixed width container with overflow: hidden. If you want the dots you can add another element containing them above the end of the text with position: absolute.
I have been asked to come up with a solution which would allow our users to create their own custom javascript dialog text. However we need it to be centered.
At the moment, we have a textarea, which the user pads using spaces and tests with a preview button. I would like to change this to allow for the text to be center aligned automatically. I think this would mean just adding the spaces myself line by line in the backend, and also adding in the correct line breaks.
The only way I can think of doing it, is getting the longest line as int, and then subtracting subsequent lines from it, and diving the result by two, and tacking that many spaces on front and back.
Is there a cleaner more elegant way to approach this problem? Are there ways of aligning text actually inside the dialog?
I had considered something like TinyMCE, but I think it's a little overkill, for what is essentially a 150 character, 4-5 line string.
On the PHP side, you can do this.
$lines=array();
foreach (explode("\n",wordwrap($str,$len=80)) as $line)
$lines[]=str_pad($line,$len,' ',STR_PAD_BOTH);
echo implode("\n",$lines);
The Javascript version should be easy to write.
This page has a useful javascript function for center-aligning a string using padding. Assuming you're displaying plain fixed-width text (using a <pre> tag or similar) then you'll need to get the length of the longest line and pad accordingly. If not, it's just a matter of setting the css: #myDiv { text-align:center; } on the div containing the text.