This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Calculate text width with Javascript
Alright, so here's what I am looking to see if can be accomplished. I want to take user submitted text (so.. variable length) and place it into a fixed width/height div. If the text will exceed the space allotted, I want to show as much as possible and place an ellipsis (...) at the end, as close to the boundary as I can.
So what I'm wondering... is it possible to tell how much space a certain block of text will take up (javascript)? I'm not looking to use a mono-spaced font, and even if I did I don't know if it would help much.
I'm beginning to wonder if there simply aren't too many variables to account for, and that I'll end up needing to do something less precise, such as outputting a fixed maximum of characters. But I wanted to see if anyone has accomplished something like this before, or if the general consensus was "not possible/not worth the effort." Thanks all!
Working Fiddle
function width(tex) {
var text = tex;
var div = document.createElement("div");
div.style.position="absolute";
div.style.top="-999px";
div.style.left="-999px";
div.id = "width";
div.innerHTML=tex;
document.body.appendChild(div);
var el = document.getElementById("width");
var w = el.offsetWidth;
el.parentNode.removeChild(el);
return w;
}
var s = parseInt(width("s"), 10);
alert(s);
The above will return width of text!
A quick search revealed this possible solution for you here.
This may not be exactly what you are looking for. I will keep digging and update this when I find more.
Related
What I want to do is so that when word riches the end of the line to divide word into two words and insert hyphen before line-break. It's similar to <wbr> tag but it doesn't inserts anything.
Examples:
Java- <--- I want to insert this hyphen before line-break
Script
or
Ja- <---- Same here
vaScript
Is there anyway of doing it? I don't mind using php, javaScript but jQuery would preferable and if I can achieve it using CSS or HTML that would be great.
Thnx in advance!
If you want to do it client-side, you will need a hyphenation plugin. Reason being, there needs to be a dictionary of hyphenation rules to follow, and that's something that's not simply included in the browser. [update: although, that statement is partially false already! Chris's link shows limited (very limited, but still... promising!) support.]
Here's one jQuery plugin I found: http://archive.plugins.jquery.com/plugin-tags/hyphenation and I know I've used one in a project before (may have been this one even). It will of course insert the hyphen into the node's contents, but the content doesn't need to have it included, the hyphenation is calculated by the function after DOM ready.
Whether or not the rules are extensive enough to break up words outside of the 'norm' is another question.
Side note: JavaScript is a proper noun, which should be excluded from hyphenation. I imagine that was just an example off the top of your head, though. ;-)
It looks like there is some limited browser support for CSS hyphenation. Does that work for you?
This function should solve your problem. It insert Soft Hyphen | $shy; into "long" words.
pText = Your string
pMax = Every X Char in a word insert a Soft Hyphen;
function hyphen(pText, pMax){
var t = pText.split(" ");
for(i=0; i<t.length; i++){
if(t[i].length<pMax){
var w = t[i]
var re = new RegExp("(.{"+pMax+"})","g");
if(w.length<pMax+3){
var pos = t[i].length - 3;
re = new RegExp("(.{"+ pos +"})","g");
}
t[i] = w.replace(re,"$1"+);
}
}
return t.join(" ");
}
Ok guys, this question is related to my previous one.
If I have set $textlimit = 500; that will limit my text to 500 characters.
Is there any way to "avoid" text limit, and then onclick function load rest of it?
For example, if I set:
$textpart = substr($fulltext, 0, 400);
$textpart will only contain 400 characters of string.
My question is, how to declare variable, which will contain the rest of the text which is much longer than 500 characters?
Example of variables:
$fulltext //Contains full text, but is limited to 500 characters.
$textpart //Contains part of the text, substr 400 characters out of 500.
$textrest //This variable to "hold" rest of the text, after 400 characters of $textpart.
Like I've asked in previous question, I wanted to make expand and collapse button, I now know how to do that, but I don't know how to divide text.
Form would go like this:
Random text here(400 characters long)
Random image for expand
After declared onclick function I, load rest of the text (Over 500 characters).
Random image for collapse
After declared onclick function collapse and return to previous state - citation 1.
I hope I explained my question the right way. I would really appreciate any kind of help, if I can choose, I would like just basic explanation on how to that, because I want to learn that, not copy/paste solution (it is easier, but I will not learn much).
Thanks in advance.
$textrest = substr($fulltext, 400)
$fulltext = substr($fulltext, 0, 500);
$textpart = substr($fulltext, 0, 400);
$textrest = substr($fulltext,400,strlen ( $fulltext ));
If I understand you correctly you want to show the user an initial page that shows only the first X characters and then show all the characters when the users clicks on the text.
There are three strategies to do this. From easy to hard:
Output the shortened text and include a link that will reload the whole page but with the whole text
Output all the text and use css and JavaScript to hide/show any overflow
Output the shortened text and perform an Ajax call to load the extra characters and append
Options 2 and 3 require the use of client side JavaScript and are therefore not pure PHP solutions.
Option 1 is a matter of adding a $_GET variable, e.g. ?expand=para1, to your url and expanding the text identified in PHP by $_GET['expand'].
Do not make the mistake of thinking PHP is still running on the page in the browser. Only JavaScript can run in the browser on the web page. (Not strictly true I know, but true enough in reality.)
*UPDATE:*I've already answered my question. But you can still give me advise and i'll take your answer as selected
NOTE: If you don't need to know what I want to do with the codes, just skip the first several paragraphs and directly see the codes and tell me why they doesn't work without error.
I want to make something like stackoverflow's similar title search when you enter your title in the ask page.
I need to split words to make regex and then search in the database. Since my application is in Chinese(no spaces between each words) and I think splitting chinese into meaningful phrases using PHP is too hard. I have an idea splitting it in the client side using javascript according to chinese IME's characteristic that, for example, if you want to type the word "你好中国" in chinese, people usually type "nihao[space]zhongguo" in IME(note where the space bar is), since '你好'(nihao - hello) is a phrase and '中国'(zhongguo - china) is another. So when people press space bar i record the word he entered before the space and start a timer of 2 seconds , if he or she enters another words clear the timer and continue to record if he or she doesn't, send each words recorded to the server.
Qustion is, is this a good idea? Are there any other convenient way to do this? And why these lines i wrote to test won't work without error.
script:
$(function(){
var i=0;
$('#t').keyup(function(e){
if(e.keyCode==32)
{
eval("a"+i+"=$(this).val()");
i++;
var timer=setTimeout("for(b=0;b<i;b++){alert(eval('a'+b));}",1000);
if($("#t").keydown())
{
clearTimeout(timer);
}
}
})
})
html:
<input id="t"/>
I think i know why it won't work now:
First, i should be a global variable;
Second, the keydown() function should be outside of the keyup(). modified js:
$(function(){
i=0;
timer=null;
$('#t').keyup(function(e){
if(e.keyCode==32)
{
eval("a"+i+"=$(this).val()");
i++;
timer=setTimeout("for(b=0;b<i;b++){alert(eval('a'+b));}",1000)
}
})
if($("#t").keydown())
{
clearTimeout(timer);
}
})
If you have other suggestions on my idea or codes you can still answer this question or i'll select this one after some time.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
text-overflow:ellipsis in Firefox 4?
I have the same issue mentioned in Truncating long strings with CSS: feasible yet?. It's been nearly two years since that post, and Firefox still ignores the text-overflow: ellipsis; property.
My current solution is to truncate long strings in PHP like so:
if(strlen($some_string) > 30)
$some_string = substr($some_string,0,30)."...";
That more or less works, but it doesn't look as nice or as accurate as text-overflow: ellipsis; in browsers that support it. The actual width of thirty characters varies since I'm not using a monospace font. The XML fix and jQuery plugins posted in the other thread appear to no longer work in Firefox either.
Is there currently a way to do this in CSS that is browser independent? If not, is there a way to measure the width of a string given a font and font size in PHP so that I might more accurately place my ellipsis?
This answer might be useful for getting your output truncated to the nearest word, and then simply append a … (…) HTML entity onto the end of the output to get your final output.
As you've noticed there's not sufficiently wide browser support yet the CSS solution yet, and you've still got to worry about old browsers too.
It is a shame that all browsers don't handle the same CSS features. However, you could always do something like this using JavaScript (with help from jQuery).
Here's an example of how such a thing might look: http://jsfiddle.net/VFucm/
The basic idea is to turn your string into an array of words, like so:
var words = full.split(/\s+/g);
Loop through them and take the first N (in this case I chose 24) and push them into another array:
for (var i = 0; i < 24; i++) {
short.push(words[i]);
}
Throw them back into the HTML element they came from:
$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');
... here I added a "link" to expand the shortend text. It's made to look and act like a link using CSS. I also provided a function to replace the shortened text with the foll text again:
$('.expand').click(function() {
$('.snip').html(full);
});
I want a phone number which display on public page will be protected. Example converts phone number characters to HTML entities and bots can't grab the number in plain text. Let me know the trick.
This is a...passing thought, though I'm not sure how practical it would be:
<span class="protectedNumber" title="01234567890"></span>
css:
span.protectedNumber:before {
content: "Phone number: " attr(title);
}
JS Fiddle demo.
Edited, in response to 'cross browser?' question in comments, to add a jQuery option to assist with those browsers that don't have the ability to deal with css-generated content:
$(document).ready(
function(){
$('.protectedNumber').each(
function(){
$(this).text('Phone number: ' + $(this).attr('title'));
});
});
some ideas
display the phone number as an image
use javascript to create and display the phone number
throw in html tags in between the numbers (e.g. [span]) that visually makes no difference but makes it more difficult for the bot to recognize the phone number
Try writing the number using ASCII:
http://www.ascii.cl/htmlcodes.htm
<html>
<body>112</body>
</html>
The first thing I'd think of is render an image.
Use Javascript to obfuscate
Obfuscate using a php function
Sure just print the phone number using words instead of numbers...
Create an image of the number, this will foil MOST bots, but some may have OCR, so obfuscate it.
ie: Good:
Better:
The 2nd 1 better because like Captcha, the background contains "noise" that makes it hard for OCR enabled bots to harvest, but is as readable to human eyes..
The hard solution would be use Captcha or a simple PHP script to create the picture on the fly, but in most cases, unless you using alot of different #'s the "better" solution above easiest and quickest method, can do easy even in simple program like Paint in 5 min.
For the visually impaired, include a small link to an audio file (mp3) of you saying the number, if it linked properly, and accordingly, it should work.