I'm trying to find a solution for wrapping words that are extremely long within a shoutbox. For example, if someone writes out a filepath or if someone just writes a bunch of nonsense. For example:
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense
The Shoutbox can have multiple widths (depending on where it's located), so setting a width for the outer tag would not be appropriate, since the content needs to expand to fill up the width on the page. Now inside this outer tag, there are inner tags that hold each shout within it.
Now, I've done some homework on this and it's been said that this will work:
.yourclass(#youid)
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: normal; /* Firefox */
}
But I need this to work in all 5 Major Browsers: Firefox, Internet Explorer 7 and 8, Opera, Chrome, and Safari. Is there a solution for all 5 Major Browsers?
Note: I don't mind combining CSS, JS, PHP, and/or any other language to get this to work right.
Has anyone experienced this issue? Has anyone ever resolved it? I look at php's function wordwrap, but this doesn't help me, since it wants a number of characters. Might help if I could define a width in pixels and if the word exceeds this width, to wrap the next character onto the next line down. The problem with using characters for a word wrap is that these characters can have different font sizes, and it will NOT be consistent and will NOT help at all. Perhaps there is a way to determine the width of each character? And if this width exceeds the width of the Shoutbox, than wrap it down to the next line? That might actually work, but I'm at a loss for how to determine this.
Can someone please help me? Thanks :)
Here is the link where I am using the above CSS => http://acs.graphicsmayhem.com/spoogs/index.php
It actually does wrap the very long word in Opera in all 3 of the shouts in Opera, can someone please test in other browsers and give me some feedback on this?
word-wrap: break-word; is indeed what you are looking for. Not sure if it works in Opera, but others should all work.
Your choices (as I see it) are:
Use a solution that doesn't work for all browsers, or
Use CSS overflow:auto or overflow:hidden to preserve the container size
while letting the unbroken words flow past the edge, or
Break at a character limit (on the server or client) and 'break' the nonsense text, or
Do some fast (but visible-to-the-user) breaking and re-breaking of the text at various
character limits until you find a situation where scrollWidth <= clientWidth.
(This will require repeated setTimeout calls to allow the browser to re-flow after your
change, before you can measure the effect.)
I suppose you could also use a rough heuristic based on a known font size and measured width,
but that also wouldn't meet what appear to be your criteria for exactness. I'm sorry to say
that what you want (as I understand it) is not reasonably possible using the technology at hand.
I suggest you use two method below:
Truncate(): http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/
Ellipsis(): http://brenelz.com/blog/creating-an-ellipsis-in-php/
Otherwise, you can use CSS by set overflow is hidden.
Hope that help
Related
This is a problem I seem to run into over and over with clients. They have a limited amount of space for a title, say like an image caption. The space is limited because it's in a series of boxes floating next to each other, let's say. However, the client baulks at an attempt to put a cap on the title length. Yet at the same time, they don't want this text to wrap.
I've tried several different methods to tackle problems like this over time...something similar to text-overflow, when strlen() is used to add ellipsis to the overflowing text, with the full text in a title attribute, I've tried re-sizing fonts based on strlen() to make text fit.
Just wondering if anyone had a more elegant solution for situations like this?
I may be misunderstanding you, but if you're saying a valid solution is the ellipsis then that can be accomplished in CSS using the following stylings
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
No need to use Php.
Alternatively from the CSS solution you could also look into this jQuery solution if the client doesn't mind the ellipsis.
http://dotdotdot.frebsite.nl/
The benefit with this is your full text is still on the page for indexing and ranking purposes.
What I'm trying to do:
I want to create text that can "float around" other text; I believe Callouts are the term. Since I'm new to CSS, I don't know where to start. If someone could kick me in the right direction, I'm sure I can explore further (and dutifully log it here).
Additional thoughts:
I'd like the 'highlight text' to still be a part of the narrative
flow of the posts/pages (nothing trapped outside the content).
I don't even know if this is a CSS or PHP thingie.
As I've been trying to do everything via child theme, I haven't even investigated
plugins. Is this wise?
A sample blog post is here.
Many thanks, in advance, for any guidance.
To get things going with how I'm interpreting your request, you'd want to the following to your H5 tag:
Float it (left or right)
Specify a width
Specify padding so items that are 'wrapping around it' aren't touching it
h5 {
float: left;
width: 100px;
padding: 0 20px 20px 0; /* shorthand for: top, right, bottom, left */
}
(Tried to make an image to showcase this, but apparently my rep. isn't high enough to help that much ;)
When you float things though, you take them out of the document's vertical flow, so depending on how this will be used you may want to investigate things like 'clearfix' or clearing a float if you need the height of the callout to be respected. (Like if text isn't intended to wrap past the callout, your callout may overlap your footer or something odd like that.)
I can elaborate further on a fix if you provide some more info. In your sample post, what would be a call out?
In my website, the user's username is always displayed at the top of every page (along with the site title, other page links, etc.) in a font size of "3"
It took me a really long time to figure this out, but it eventually came to my attention that the users with really long usernames ended up messing with the spacing at the top of every page and all the text gets pushed down a line, making the whole thing look ugly as sin (it's only visible to the individual user since it's their username, but I don't want any of my users seeing it at all).
I'm not asking how to find the number of characters in their name -- what I want to know is how I can determine the physical amount of space their name will take up and, in the event it will be too long, reduce the font size to 2, or even 1 if necessary.
The reason why a simple strlen() wouldn't work is because of the potential space differences ("Tragic Dionysus" takes up less room than "HERSHEYFEVER", regardless that the former has more characters in it).
An extensive Google search continually leaves me with more character counting methods, so I'm left clueless.
You cannot use PHP for this - because so much depends on front-end styling (font-families, font-size, font-styling, etc.). You can use jQuery to ascertain the element length, and apply certain functionality if needed:
HTML
<span id="box"><?=$yourString?></span>
jQuery
$(function() {
var box = $('#box');
if (box.width() >= 50) {
box.addClass('massiveLength');
}
});
Or, if you want to apply something to all elements, here's a jsFiddle showing you how.
It is fundamentally impossible to do this well on the server.
Instead, use Javascript to get the actual width of the element, then reduce its font size.
I'm just gonna toss this out, but if you wrap the username block in a an element and give it a max-width, it might solve your problem.
<span style="max-width: 50px; overflow: hidden;">The Username Goes Here</span>
Does anyone know a clever way to create even columns of text using php?
So lets say I have a few paragraphs of text and I want to split this into two columns of even length (not string length, I'm talking even visible length).
At the moment I'm splitting based on word count, which (as you can imagine) isn't working too well. For instance, on one page I have a list (ul li style) which is increasing the line breaks but not the word count. eg: whats happening is that the left column (with the list in it) is visibly longer than the right column (and if there was a list in the right hand column then it would be the same the other way round).
So does anyone have a clever way to split text? For instance using my knowledge of objective c there is a "size that fits" function. I know how wide the columns are going to be, so is there any way to take that, and the string, and work out how high its going to be? Then cut it in half? Or similar?
Thanks
ps: no css3 nonsense please, we're targeting browsers as far back as ie6 (shudder). :)
I know you're looking at a PHP solution but since the number of lines will depend on how it's rendered in the browser, you'll need to use some javascript.
You basically need to know the dimensions of the container the text is in and using the height divided by the text's line-height, you'll get the number of lines.
Here's a fiddle using jQuery: http://jsfiddle.net/bh8ZR/
There is not a lot of information here as to the source data. However, if you know that you have 20 lines of data, and want to split it, why not simply use an array of the display lines, then divide by two. Then you can take the first half of the PHP array and push it into the second column when you hit the limit of the first.
I think you're going to have trouble displaying these columns in a web browser and having a consistent look and feel because you're trying to apply simple programming logic to a visual layout. CSS and jQuery were designed to help layout issues. jQuery does have IE6 compatibility.
I really don't think you're going to find a magic bullet here if you have HTML formatting inside the data you're trying to display. The browser is going to render this based on a lot of variables. Page width, font size, etc. This is exactly why CSS and other layout styles are there, to handle this sort of formatting.
Is there any reason why you're not trying to solve this in the browser instead of PHP? IE6 to me is not a strong enough case not to do this where it belongs.
Do you guys have some tips to make any large table, with 500+ rows, display quicker in Internet Explorer?
This is how I'm doing it right now:
The result of the MySQL query returns 500+ rows, so I use to a while loop with the following to display all the rows:
echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo "<td width='100px' class='ClassAgain' id='>another string</td>";
echo "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/></td>";
echo "</tr>";
When the list is done, IE just freezes for a couple of seconds and then the list appears. In addition to this any hover effect on the <tr> works really slowly.
I'm not sure why this slow motion is being caused in IE as all other browsers work perfrectly.
Any help would be greatly appreciated.
Remember that most IE users aren't aware that their experience is subpar, they are used to it.
The best way might be to implement pagination, either server side, or via javascript.
Unfortunately it's going to be a problem with IE... You're better off somehow gracefully degrading for IE. Maybe just show the first 50 rows and implement pagination.
Save the data in a javascript object, load the first 20 (or however many take up the page), wait for document.ready and then start plugging the rest of the rows in with javascript. You could even plug the rows in as the page is scrolled.
A lot of work to make it look good in such a piece o' crap browser.
Rendering 500 rows on one page is a bad idea no matter what browser you are using, even though it might work better in Safari, Firefox and Chrome compared to IE. From a usability point of view it's horrible too.
So a better approach would probably be to re-think the solution and introduce pagination instead. Maybe 50 rows per page? or something.
Try to limit the markup. Remove all the width, style, id, etc, attributes, then make a script to populate these after the HTML is loaded. Scrap the style and width, go with classes. Remove extra spaces.
You can impliment it only showing what you need as you scroll through ajax, something like this tut, or even this tut.
But really IE just is awful. Having that much HTML is just so much for a simple little browser to handle...unless of course its not garbage.
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
Source
Try using table-layout: fixed in your CSS:
With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.
That should speed up the initial rendering but you'll have to manage the column sizes by hand. Table column sizing usually requires a full scan of the table and then some negotiation if there isn't enough room to accommodate the natural widths of all the columns; using a fixed layout avoids the scan and the negotiation by statically setting the widths right away and then making all the cells comply whether they like it or not.