SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to handle long length entries in CSS tables?

    I am working with CSS tables and required to display URLs in few of the columns. As you would imagine some of the URLs are way too long to be included in a table as a result of which cruel re sizing is performed within the table ( two rowed entries, table floats to the right etc. ). What are the best practices to handle entries in such cases? Doing some like "half of the entry and then......" or "half entry here .... a little bit here" would be the right way to go or is there some better way around it?


    Thanks

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Depends on the content, you can use white-space:nowrap to prevent wrapping if you want it to blow out the width that you can scroll to.
    If it's just the URL's that are causing problems then showing the first 20 chars or so should work.

    There's no one right way to handle it, depends on the content and design.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You can make the content break to a new line using word-wrap:break-word which has good support now and will force the unbroken url to wrap. You need to use it on an inner element rather than a table-cell as some browsers are picky.

    Or you could use text-overflow:ellipsis which will truncate the url and apply three dots at the end and is supported in modern browsers.

    Or you could do the same as above and then let the url expand on hover so its visible.

    Example of all three in a css table:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .outer {
    	display:table;
    	width:500px;
    	border-spacing:20px;
    	table-layout:fixed;
    	margin:25px;
    	border:1px solid red;
    }
    .cell {
    	display:table-cell;
    	border:1px solid #000;
    	padding:5px;
    }
    .url{margin:10px 0;padding:2px 4px}
    .outer1 .url{word-wrap:break-word}
    .outer2 .url{
    	white-space:nowrap;
    	text-overflow:ellipsis;
    	overflow:hidden;	
    }
    .outer3 .url:hover{
    	overflow:visible;
    	background:#fcf;
    	display:table;
    	position:relative;
    	padding:0;
    	border-spacing:0;
    	border:1px solid red;
    }
    </style>
    </head>
    
    <body>
    <div class="outer outer1">
    		<div class="cell">
    				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    </div>
    <div class="outer outer2">
    		<div class="cell">
    				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    </div>
    <div class="outer outer2 outer3">
    		<div class="cell">
    				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    		<div class="cell">
    				<p class="url"><a href="#">along url</a></p>
    		</div>
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Paul, I think you unearthed a little Firefox bug....

    Modified the text string with underscores so the bleedthru of the ellipsis in the second box would be obvious in the screenshot.

    EllipsisBugFF.png

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronpat View Post
    Paul, I think you unearthed a little Firefox bug....

    Modified the text string with underscores so the bleedthru of the ellipsis in the second box would be obvious in the screenshot.

    EllipsisBugFF.png
    Hi Ron,

    Which version is that? My Firefox 16.0.2 doesn't look like that.

    What happens if you remove the ellipses on hover.

    e.g.
    Code:
    .outer3 .url:hover{
    	text-overflow:inherit;
    	overflow:visible;
    	background:#fcf;
    	display:table;
    	position:relative;
    	padding:0;
    	border-spacing:0;
    	border:1px solid red;
    }

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The latest and greatest: FF17.0

    I had already removed {text-overflow:ellipsis} from .outer3 since it was being applied by .outer2. Didn't make any difference. Now I'm really curious...!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Just upgraded to FF17 and it still works for me. Are you on a PC or a mac?

    Did you change the code in any way as I can't reproduce it here.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    .outer3 .url:hover {z-index:1} fixes it.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is the code that demonstrates the bleedthru on my screen. Restarted FF with addons disabled (Safe Mode); bleedthru still visible. Odd. I would think that .outer3 .url:hover {position:relative} alone should prevent that.

    I'm using a PC; WinXPPro, SP3.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?925838-Best-way-to-handle-long-length-entries-in-CSS-tables
    
    Code by Paul O'B
    -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
    .outer {
        display:table;
        width:500px;
        border-spacing:20px;
        table-layout:fixed;
        margin:25px;
        border:1px solid red;
    }
    .cell {
        display:table-cell;
        border:1px solid #000;
        padding:5px;
        vertical-align:middle;   /* added */
    }
    .url {
        margin:10px 0;
        padding:2px 4px;
    }
    .outer1 .url {
        word-wrap:break-word;
    }
    .outer2 .url {
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }
    .outer3 .url:hover {
        text-overflow:inherit;
        overflow:visible;
        background:#fcf;
        display:table;
        position:relative;
        padding:0;
        border-spacing:0;
        border:1px solid red;
    /*    z-index:1;               /* fixes bleedthru of ellipsis */
    }
        </style>
    </head>
    
    <body>
    <div class="outer outer1">
        <div class="cell">
            <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">{word-wrap:break-word;}</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">ashorturl</a></p>
        </div>
    </div>
    <div class="outer outer2">
        <div class="cell">
            <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">ashorturl</a></p>
        </div>
    </div>
    <div class="outer outer2 outer3">
        <div class="cell">
            <p class="url"><a href="#">alongurlthatpushesthecellwide___ifnothandledcorrectly</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;display:table;}</a></p>
        </div>
        <div class="cell">
            <p class="url"><a href="#">ashorturl</a></p>
        </div>
    </div>
    
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ah ok I've just realised what you were saying and its the ellipses of the next element that shows through. I thought your image was showing an ellipsis in place on the current entry as I didn't have any other long urls in my example.

    It looks as though Firefox is creating a stacking context for the ellipses to make sure its on top of the text so as you suggest adding a higher z-index fixes the problem. Well spotted


Bookmarks

Posting Permissions

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