locked
is there in javascript or html a function equiavlent to cliptobound? RRS feed

  • Question

  • is there in javascript or html a function equivalent to cliptobound?

    Thursday, May 3, 2012 1:29 PM

Answers

  • Things get more complicated with text - lots more properties to play with. This was a simple gadget I made once upon a time to show the interplay between overflow (which is always set to hidden) and textOverflow, whiteSpace and wordWrap. (and button styles in the image, as always, are courtesy of my Windowblinds skin)

    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Hello World</title>
      <style type="text/css">
       body {width:100%;background:#999;color:#000;text-align:center;margin:0;padding:20px;font:bold 10px/12px Arial;}
       #imgBackground {width:180px;height:130px;padding-top:5px;position:relative;background:#777;margin:0 auto;}
       #wwLabel {width:150px;position:absolute;bottom:5px;left:10px;}
       #wsLabel {width:150px;position:absolute;bottom:30px;left:10px;}
       #toLabel {width:150px;position:absolute;bottom:55px;left:10px;}
       #pressButton1, #pressButton2, #pressButton3 {width:80px;font:bold 10px/14px Arial;color:#fff;}
       .lab {width:50px;text-align:left;}
      </style>
      <script type="text/javascript">
       function press(){
        var isWrap=(document.getElementById("message").style.whiteSpace==="normal")||false;
        document.getElementById("message").style.whiteSpace=(isWrap===true)?"nowrap":"normal";
        document.getElementById("pressButton1").style.color=(isWrap===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.whiteSpace;
       }
       function press2(){
        var isOverflow=(document.getElementById("message").style.textOverflow==="clip")||false;
        document.getElementById("message").style.textOverflow=(isOverflow===true)?"ellipsis":"clip";
        document.getElementById("pressButton2").style.color=(isOverflow===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.textOverflow;
       }
       function press3(){
        var isWordWrap=(document.getElementById("message").style.wordWrap==="normal")||false;
        document.getElementById("message").style.wordWrap=(isWordWrap===true)?"break-word":"normal";
        document.getElementById("pressButton3").style.color=(isWordWrap===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.wordWrap;
       }
       function init(){
        document.getElementById("pressButton1").onclick=press;
        document.getElementById("pressButton2").onclick=press2;
        document.getElementById("pressButton3").onclick=press3;
       }
      </script>
     </head>
     <body onload="init()">
      <div id="imgBackground">
       <div id="message" style="width:120px;height:36px;margin:0 auto;text-align:left;overflow:hidden;font:bold 10px/12px Arial;word-wrap:normal;text-overflow:clip;white-space:normal;background:#bbb;">Makethissentencewraptothenext line at the push of a button</div>
       <div id="buttonBox" style="text-align:right">
        <div id="toLabel"><span class="lab">Text-overflow:</span><button id="pressButton2" type="Button"/>clip</button></div>
        <div id="wsLabel"><span class="lab">White-space:</span><button id="pressButton1" type="Button"/>normal</button></div>
        <div id="wwLabel"><span class="lab">Word-wrap:</span><button id="pressButton3" type="Button"/>normal</button></div>
       </div>
      </div>
     </body>
    </html>


    • Edited by mystifeid Thursday, May 3, 2012 4:35 PM
    • Marked as answer by marck68 Friday, May 4, 2012 6:55 AM
    Thursday, May 3, 2012 4:32 PM
  • overflow attribute || overflow property ??

    eg

    myElement {width:200px;height:200px;overflow:hidden;}

    will clip any children that exceed 200x200px

    Also

    overflow-x attribute || overflowX property

    overflow-y attribute || overflowY property

    Also can specify clipping area with

    clip attribute || clip property

    • Marked as answer by marck68 Friday, May 4, 2012 6:55 AM
    Thursday, May 3, 2012 2:44 PM

All replies

  • overflow attribute || overflow property ??

    eg

    myElement {width:200px;height:200px;overflow:hidden;}

    will clip any children that exceed 200x200px

    Also

    overflow-x attribute || overflowX property

    overflow-y attribute || overflowY property

    Also can specify clipping area with

    clip attribute || clip property

    • Marked as answer by marck68 Friday, May 4, 2012 6:55 AM
    Thursday, May 3, 2012 2:44 PM
  • Things get more complicated with text - lots more properties to play with. This was a simple gadget I made once upon a time to show the interplay between overflow (which is always set to hidden) and textOverflow, whiteSpace and wordWrap. (and button styles in the image, as always, are courtesy of my Windowblinds skin)

    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Hello World</title>
      <style type="text/css">
       body {width:100%;background:#999;color:#000;text-align:center;margin:0;padding:20px;font:bold 10px/12px Arial;}
       #imgBackground {width:180px;height:130px;padding-top:5px;position:relative;background:#777;margin:0 auto;}
       #wwLabel {width:150px;position:absolute;bottom:5px;left:10px;}
       #wsLabel {width:150px;position:absolute;bottom:30px;left:10px;}
       #toLabel {width:150px;position:absolute;bottom:55px;left:10px;}
       #pressButton1, #pressButton2, #pressButton3 {width:80px;font:bold 10px/14px Arial;color:#fff;}
       .lab {width:50px;text-align:left;}
      </style>
      <script type="text/javascript">
       function press(){
        var isWrap=(document.getElementById("message").style.whiteSpace==="normal")||false;
        document.getElementById("message").style.whiteSpace=(isWrap===true)?"nowrap":"normal";
        document.getElementById("pressButton1").style.color=(isWrap===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.whiteSpace;
       }
       function press2(){
        var isOverflow=(document.getElementById("message").style.textOverflow==="clip")||false;
        document.getElementById("message").style.textOverflow=(isOverflow===true)?"ellipsis":"clip";
        document.getElementById("pressButton2").style.color=(isOverflow===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.textOverflow;
       }
       function press3(){
        var isWordWrap=(document.getElementById("message").style.wordWrap==="normal")||false;
        document.getElementById("message").style.wordWrap=(isWordWrap===true)?"break-word":"normal";
        document.getElementById("pressButton3").style.color=(isWordWrap===true)?"#f00":"#fff";
        this.innerHTML=document.getElementById("message").style.wordWrap;
       }
       function init(){
        document.getElementById("pressButton1").onclick=press;
        document.getElementById("pressButton2").onclick=press2;
        document.getElementById("pressButton3").onclick=press3;
       }
      </script>
     </head>
     <body onload="init()">
      <div id="imgBackground">
       <div id="message" style="width:120px;height:36px;margin:0 auto;text-align:left;overflow:hidden;font:bold 10px/12px Arial;word-wrap:normal;text-overflow:clip;white-space:normal;background:#bbb;">Makethissentencewraptothenext line at the push of a button</div>
       <div id="buttonBox" style="text-align:right">
        <div id="toLabel"><span class="lab">Text-overflow:</span><button id="pressButton2" type="Button"/>clip</button></div>
        <div id="wsLabel"><span class="lab">White-space:</span><button id="pressButton1" type="Button"/>normal</button></div>
        <div id="wwLabel"><span class="lab">Word-wrap:</span><button id="pressButton3" type="Button"/>normal</button></div>
       </div>
      </div>
     </body>
    </html>


    • Edited by mystifeid Thursday, May 3, 2012 4:35 PM
    • Marked as answer by marck68 Friday, May 4, 2012 6:55 AM
    Thursday, May 3, 2012 4:32 PM