/    Sign up×
Community /Pin to ProfileBookmark

Shorten a string to box size

Copy linkTweet thisAlerts:
Feb 04.2007

Hi guys,

i have a new problem/idea. I would like to shorten a long string, so that it will fit into a div with predefined width and height. One obvious solution is, to just shorten a string to some predefined number of characters, that will approximately fit into my box. OK, what i don’t like about that idea, is that if i dont use monospace font and if i put 100 of “iiii..” in the string i will end up with half empty box, on the other side, 100s of “mmmm…” are going to overflow my box. So i was wondering if it is somehow possible to detect, when my box is starting to overflow, so that i can cut my string there. And also, i would save a lot of time with a script like that, because i can use it in different sized boxes without any tuning….just plug and play.

So, is anything like that possible with JS or do i live in a fantasy world? ?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoFeb 04.2007 — Just set the overflow to hidden, and then any text that does not fit in the div will not show. Or you can create an autosizing div, but instead of having it autosize to accomodate the text, instead have it see if the dimensions are changing with the new input, and if so then remove the last input.

If you are using a textarea, then you can set overflow to hidden, and then check to make sure that the text entered is not more than the columns-1 times the rows, or to be more precise, make sure that there are only a certain number of line breaks in your text.
Copy linkTweet thisAlerts:
@MihaaauthorFeb 04.2007 — Actually i have a small box, with the beginning of a long article, and at the end of that shortened text, i would like to put "..." and a link to the whole article(read more). So if I only chop overflowing text off, i cant put "..." and a link at the end.
Copy linkTweet thisAlerts:
@mrhooFeb 04.2007 — So chop off enough to have room for the ellipses and the link and add them using the meth...
Copy linkTweet thisAlerts:
@vwphillipsFeb 05.2007 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function OpenClose(obj,w,h){
var p=obj.parentNode;
var ds=p.getElementsByTagName('DIV')
ds[0].style.top='0px';
ds[1].style.top='0px';
obj.style.top='-50px';
p.style.width=w+'px';
p.style.height=h+'px';
}

//-->
</script></head>

<body>

<div style="position:relative;overflow:hidden;width:200px;height:50px;border:solid black 1px;" >
<div style="position:absolute;left:0px;top:0px;width:400px;" onclick="OpenClose(this,400,800);">Click to Read More</div><div style="position:absolute;left:0px;top:-50px;width:400px;" onclick="OpenClose(this,200,50);" >Click to Close</div>
<div style="position:relative;width:400px;top:20px;" >
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
</div>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@MihaaauthorFeb 05.2007 — thanks vwphillips, quite simple, but useful stuff. Maybe i should dig into javascript a little bit more, but i hate debugging it!

BTW: it's still not a complete solution to my problem, because in my case i would like to link an article to another page, rather than show it in a current page.... If it was completely up to me, i would already simplify and solve this problem(just overflow anything after X'th row, and put "..." and link in the next line below the overflowing div), but i have a co-worker graphical designer that is just a pain the youKnowWhat...but in a strange way, he is right...you always have to push your limits further.
×

Success!

Help @Mihaa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...