html - CSS Clipping Text in Dynamic Header -

-

i've been trying dynamic header clip text using text-overflow:ellipsis, can't seem working need.

have @ we've implemented here https://dl.orangedox.com/selzde notice file name extends on controls, we're trying fix using text-overflow css property.

this i've tried

.toolbar {                width: 100%;                height: 45px;                background-color: #fff;                border-bottom: 1px solid #d5d5d5;              }                            .middle {                text-align: center;              }                            .left {                  text-align:left;              }                            .right {                  text-align:right;              }                            .border {                  border:thin solid silver;              }                            .clip {                overflow: hidden;                white-space: nowrap;                text-overflow: ellipsis;              }                            #float > div {                  width:32%;                  height:100%;              }                            #inline > div {                  position: absolute;                top: 0;                left: 0;                width: 100%;                height: 0;                overflow: visible;                margin-top: 3px;                }                            .hide {                  display:none;              }                            .float-right {                  float:right;              }                            .float-left {                  float:left;              }
    <div id='inline' class="toolbar">          <div class="inline left clip">              really really really really really really long line of text.          </div>          <div class="inline middle">middle stuff</div>          <div class="inline right">right stuff</div>      </div>            <br>      <hr>      <h3>second attempt</h3>      <br>         <div id='float' class="toolbar">          <div class="border left float-left clip">              really really really really really really long line of text.          </div>          <div class="border middle float-left">middle stuff</div>          <div class="border right float-right">right stuff</div>      </div>        <br>      <hr>      <strong>without middle</strong>      <br>         <div id='float' class="toolbar">          <div class="border left float-left clip">              really really really really really really long line of text.          </div>          <div class="border middle float-left hide">middle stuff</div>          <div class="border right float-right">right stuff</div>      </div>

having @ attempts i've tried above

  1. positioning correct , removing middle or right section allows left section "grow" text overflows in middle area (what we've implemented
  2. left box bounded 33% of screen allowing text overflow controlled but
  3. if middle box isn't present left box doesn't automatically resize on available space (since it's explicitly set @ 33%)

any ideas on how better structure header overflowing text & controls this?

edited answer: looks you'll need set width left div, without absolute positioning. other 2 can styled however. arrived there , believe end result you're looking for.

    #div1     {       display: inline-block;       width: 40%;       white-space: nowrap;       overflow: ellipsis;     }      #div2      {       position: relative;       width: 100px;       background: yellow;       top: -20px;       margin: 0 auto;     }      #div3      {        position: absolute;       top: 0;       left: 0;       width: 100%;       height: 20px;       overflow: visible;       margin-top: 5px;     }

jsfiddle


Comments

Post a Comment

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

-
i want check scene image against 2 train images. that, detect features , compute descriptors of both training images. before detecting, computing , matching scene image, delete matches of train1 , train2. because these matches won't facilitate matching of scene image train1 , train2. so, match train1 train2 , vector of matches trainidx , queryidx. how can delete these matches in keypoints-vector , descriptor matrix of train1 , train2? best regards, dwi i have done below: std::vector<cv::keypoint> keypoints[2]; cv::mat descriptor[2]; std::vector< cv::dmatch > matches; /* write code generate keypoints, descriptors , matches here... keypoint[0] -> train image 1 keypoints keypoint[1] -> train image 2 keypoints descriptor[0] -> train image 1 descriptors descriptor[1] -> train image 2 descriptors matches -> matched between train image 1 , 2 */ // logic keep unmatched keypoints , corresponding descriptor
Read more

java - Could not locate OpenAL library -

-
i writing game using slick2d library, uses lwjgl. lwjgl version 2.9.3. using netbeans 8. i tried adding sounds game, example music track on main menu. problem is, exception when run game, despite game still compiling , running except sound of course: sat mar 21 01:23:57 edt 2015 error:could not locate openal library. org.lwjgl.lwjglexception: not locate openal library. @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:102) @ org.lwjgl.openal.al.create(al.java:206) @ org.newdawn.slick.openal.soundstore$1.run(soundstore.java:295) @ java.security.accesscontroller.doprivileged(native method) @ org.newdawn.slick.openal.soundstore.init(soundstore.java:292) @ org.newdawn.slick.music.<init>(music.java:156) @ org.newdawn.slick.music.<init>(music.java:75) @ view.mainmenu.init(mainmenu.java:58) i didn't include rest of error states error happens in game code. the
Read more

sorting - opencl Bitonic sort with 64 bits keys -

-
i used nvidia sdk bitonic sort , works great me. 32 bits (uint) need ulong keys. have typically 2^14 keys @ time , power of 2. searched on not find kernel designed ulong. i tried modified nvidia sdk bitonic sort using ulong keys not work. kernel not crash after de call clenqueuendrangekernel got error : cl_invalid_command_queue can tell me how modify bitonic sort or radixsort, or can sort ulong keys? i running nvidia quadro 4000 opencl 1.1 cuda 6.5.20 full_profile used original nvidia sdk bitonicsort.cl i used"ulong" keys , value input , ouput instead of "uint" thanks helping i made work-around suit need. used 30 bits of key , 18 high bits of value sorting. changed comparators (2 lines): '#define mask 0xffffc000 // suit need from this: if( (*keya > *keyb) == dir ) this: if(((*keya > *keyb)||((*keya == *keyb)&&((*vala & mask)> (*valb & mask)))) == dir ) it works fine. but, still, it's work-a
Read more