Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Apr 2008
    Location
    UK
    Posts
    63
    Member #
    16740
    Hi,


    Iíve almost finished editing the layout of my video sharing website but I still have one problem thatís vexing me. It has to do with alignment.


    If someone decides to give the video theyíre uploading a really long title it messes up the alignment of all the other video thumbnails on the page. I managed to contain the text horizontally by giving the div tag that the title sits in a width and I can contain it vertically by giving it the div tag a certain height and setting the overflow to hidden in Dreamweaver CS3. I donít like doing it this way and Iím sure it wrong because unless I have the line spacing quite far apart you can see where the div tag is cropping the text in 2.


    Anyway, I noticed YouTube video titles have 3 dots appear if the title is too long, and by holding your mouse pointer over the title you get to see all of whatís written.


    Could someone please tell me how YouTube have accomplished this?


    Cheers

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    They don't use HTML to constrain the text length. YouTube retrieves that text from a database and uses string-cropping to limit it to a specific number of characters, then appending the ellipsis ("..."). Then they use javascript and DHTML to switch between that cropped output and the full text. It's more complex than it looks.

    If you have some server-side programming langauge that you can use for output, (PHP, JSP, ASP, etc), crop the string using "substr" and look at YouTube's javascript to figure out how they're generating the interface.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

constrain text inside div
,

contain string within div

,
contain text inside a div
,
contain text within div
,
containing text in div
,

how to contain text in a div

,
how to contain text inside a div
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:33 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com