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.
Related
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.
I'm not sure if this is a HTML related issue or PHP, but:
I am loading a long string from a database into tags. I want it to make it break into lines (instead if a giant line that spans past your screen size)when the string is loaded. How can i do this?
Use a <p></p> tag to contain the text you're trying to load and use CSS to constrain the size of it.
Also, I'd question the use of a table at all unless you're loading data that should be presented in a tabular format.
I'd also avoid making any formatting decisions on the PHP side unless you absolutely have to. Using PHP to auto-add <br> tags to everything, or using <br> tags to enforce page width is a really bad method. If they resize the browser window or change text height (accessibility) your forced formatting will get in the way.
TD tags get weird with content depending on the browser. If you can avoid using tables, I'd start there. If not, encasing the text in another block element, like <p> might keep it from stretching the <td> into one line, especially if you use a CSS style like width: 100% on the <p>. In general, PHP should do no formatting if you can help it, and HTML+CSS should do the rest. Tables are a bad choice when attempting to lay out a page, and should be replaced with <div> tags and appropriate CSS, with the only exception being data presented in tabular format, such as a table of data.
Combine PHP's wordwrap() and nl2br() functions to limit line size and then convert the newlines generated by wordwrap() into HTML <br />.
echo nl2br(wordwrap($alongstring, 72));
Not sure how this affects the <td> tags mentioned in your question title. How are you using those?
If you set a width to the container, it will wrap the text automatically when it reaches the end of the container unless you add white-space:nowrap; in CSS.
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
Setup
I have a website that draws RSS feeds and displays them on the page. Currently, I use percentages on the divs that contain each feed, so that multiples can appear next to each other.
However, I only have two next to each other, and if the window resizes, there can be some ugly empty space on the screen.
Desire
What I'd like to be able to do, but have not figured out a way yet, is to put all the feeds linearly into the page, and have:
a 'pre-built' multicolumn view where the feeds would "balance" themselves into the columns
which leads me to:
the number of columns change depending on how wide the screen is currently\
This is akin to how word processing applications handle columnar layouts.
Question
I presume that I will need to implement some form of AJAXy happiness, but currently know very little about Javascript.
Is there a way to do this with just CSS/HTML/PHP?
If not, how should I go about solving this?
final solution:
(based on #warpr's and #joh6nn's answers)
#rss
{min-width: 10em;
max-width: 25em;
min-height: 15em;
max-height: 25em;
font-size: .97em;
float: left;
}
You probably cannot get what you want with just CSS/HTML, but you can get somewhat close.
A trick I used for a photo album is this:
Make sure each feed has a fixed width, I would recommend something like '20em';
Make sure each feed has the same height.
Float everything left.
Because each div has the same dimensions, when they're floated left they will form a grid with exactly the number of columns that will fit in your browser.
Unless you actually fix the height of the divs and use CSS to clip the content, you will need javascript for step 2, what I did was:
Iterate over each feed div, finding the tallest div.
Iterate over each div again, changing the height to match the div found in the first step.
This is fairly easy to implement, but is obviously not optimal. I look forward to reading any better solutions posted here :)
you might be able to do this with lists; i've never tried it, so i'm not sure.
if you make list items display:inline, the list becomes horizontal instead of vertical. from there, if you stuff the list into a containing element and fiddle with the padding and margins, you may be able to get the list to line-warp, like text: again, i've never tried that, so i don't know.
if this technique works, i'd be very interested to hear about it.
The only way I can think of is a mixture of dynamic CSS and javascript. Every time a column (feed) is added, use the javascript to rewrite the width (in percentage) of each div.
jQuery would come in handy here.
var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");
Someone feel free to correct me if I'm wrong. My jQuery is a little wobbly.
Of course, if you're not using AJAX, you could implement the same solution entirely in PHP.
You could also use this jQuery javascript (you will need the jQuery library).
var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
$(this).width(colWidth);
});
Which would set the column width dynamically.
For this to work your columns should have the class 'feed'
EDIT:
You should style your divs something like this:
.feed{
float:left;
}