html - CSS table cell alignment and ellipsis not working -


i have html code not hidden , cut off using css ellipsis.

i have tried many things fix issue, nothing works me (and killing me cannot fix such simple issue). have read posts css ellipsis.

here visual representation of have:

enter image description here

as shown 11/2001 (2 annees, 10 mois) dropped next line , ellipsis not take effect.

i trying keep 11/2001 (2 annees, 10 mois) next prompt date d'achevement , cut off (hidden) ellipsis if value long, in case.

here html

<div id="live_preview" class="livepreview_resumewrapper1">     <div class="resumestylewrapper25">         <div class="resumestyleoptimisedcontainer25">             <div class="resumestylestandardheadings25">emploi détails d'histoire</div>         </div>         <div class="resumestylewrapper25">             <div class="resumestylestandardtablerow25">                 <div class="resumestylestandardcontainer25">                     <div class="resumestylestandardtablerow25">                         <div class="resumestylestandardlabels25">employeur</div>                         <div class="resumestylestandardlabelcontent25">french</div>                     </div>                     <div class="resumestylestandardtablerow25">                         <div class="resumestylestandardlabels25">date de demarrage</div>                         <div class="resumestylestandardlabels25">                             <div class="resumestyledatestartcontent25">01/2009</div>                                             <div class="resumestylefinishdatelabel25">date d'achevement</div>                             <div class="resumestyledatefinishcontent25">                                 <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>                             </div>                         </div>                     </div>                 </div>             </div>         </div>     </div> </div>

here css

.livepreview_resumewrapper1 {     border: 1px solid #000;     box-shadow: 10px 10px 5px 0px #888888;     direction: ltr;     padding: 20px;     width: 93%; }  .resumestylewrapper25 {     border-spacing: 0px 0px;     display: table;     font-family: verdana;     font-size: 12px;     width: 100%; }  .resumestyleoptimisedcontainer25 {     /* class alternates between row , non-row depending on style requirements */     background-color: #000;     display: table-cell;     font-weight: bold;     min-width: 149px;     padding: 2px;     text-transform: uppercase;     vertical-align: top;     width: 18%; }  .resumestylestandardheadings25 {     background-color: #000;     color: #fff;     display: table-cell;     font-weight: bold;     min-width: 149px;     padding: 2px;     text-transform: uppercase;     vertical-align: top;     width: 18%; }  .resumestylestandardcontainer25 {     padding-left: 5px;     width: 100%; }  .resumestylestandardtablerow25 {     display: table-row; }  .resumestylestandardlabels25 {     direction: ltr;     display: table-cell;     font-weight: bold;     height: 100%;     min-height: 25px;     overflow: hidden;     padding: 2px;     padding-right: 10px;     text-align: right;     vertical-align: top;     white-space: nowrap; }  .resumestyledatestartcontent25 {     direction: ltr;     display: table-cell;     float: left;     padding: 2px;     text-align: left;     vertical-align: top;     width: 20%; }  .ellipsis {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; }  .resumestylefinishdatelabel25 {     background-color: #fff;     color: #000;     direction: ltr;     display: table-cell;     float: left;     font-weight: bold;     padding: 2px;     padding-right: 10px;     text-align: left;     vertical-align: top; }  .resumestyledatefinishcontent25 {     direction: ltr;     display: table-cell;     float: left;     padding: 2px;     text-align: left;     vertical-align: top; }

can point out doing incorrectly?

edit

i have updated html & css requested in comments.

there problem of css table structure, have table cells stay directly under element set table cell, invalid. can wrapped inner table cell elements container , set display:table, fix issue.

it's part:

<div class="table">     <div class="resumestylestandardlabelcontent25">         <div class="ellipsis">01/2009 date d'achevement</div>     </div>     <div class="resumestylestandardlabelcontent25">         <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>     </div> </div>

in general correct css table layout this, row isn't needed if there 1 row.

<div style="display:table">     <div style="display:table-row">         <div style="display:table-cell">             ...

when use css text-overflow:ellipsis in table, needs work fixed table layout, , has width value set, either fixed or percentage both fine.

it's this:

.table {     display: table;     width: 100%;     table-layout: fixed; }

lastly:

remove float properties table cells, don't work together.

here updated code snippet:

body {width: 500px;} /*for demo only*/    .livepreview_resumewrapper1 {      border: 1px solid #000;      box-shadow: 10px 10px 5px 0px #888888;      direction: ltr;      padding: 20px;      width: 93%;  }  .resumestylewrapper25 {      border-spacing: 0px 0px;      display: table;      font-family: verdana;      font-size: 12px;      width: 100%;  }  .resumestyleoptimisedcontainer25 {      /* class alternates between row , non-row depending on style requirements */      background-color: #000;      display: table-cell;      font-weight: bold;      min-width: 149px;      padding: 2px;      text-transform: uppercase;      vertical-align: top;      width: 18%;  }  .resumestylestandardheadings25 {      background-color: #000;      color: #fff;      display: table-cell;      font-weight: bold;      min-width: 149px;      padding: 2px;      text-transform: uppercase;      vertical-align: top;      width: 18%;  }  .resumestylestandardcontainer25 {      padding-left: 5px;      width: 100%;  }  .resumestylestandardtablerow25 {      display: table-row;  }  .resumestylestandardlabels25 {      direction: ltr;      display: table-cell;      font-weight: bold;      height: 100%;      min-height: 25px;      overflow: hidden;      padding: 2px;      padding-right: 10px;      text-align: right;      vertical-align: top;      white-space: nowrap;  }  .resumestyledatestartcontent25 {      direction: ltr;      display: table-cell;      /* float: left; */      padding: 2px;      text-align: left;      vertical-align: top;      width: 20%;  }  .table {      display: table;      width: 100%;      table-layout: fixed;  }  .ellipsis {      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;  }  .resumestylefinishdatelabel25 {      background-color: #fff;      color: #000;      direction: ltr;      display: table-cell;      /* float: left; */      font-weight: bold;      padding: 2px;      padding-right: 10px;      text-align: left;      vertical-align: top;  }  .resumestyledatefinishcontent25 {      direction: ltr;      display: table-cell;      /* float: left; */      padding: 2px;      text-align: left;      vertical-align: top;  }
<div id="live_preview" class="livepreview_resumewrapper1">      <div class="resumestylewrapper25">          <div class="resumestyleoptimisedcontainer25">              <div class="resumestylestandardheadings25">emploi détails d'histoire</div>          </div>          <div class="resumestylewrapper25">              <div class="resumestylestandardtablerow25">                  <div class="resumestylestandardcontainer25">                      <div class="resumestylestandardtablerow25">                          <div class="resumestylestandardlabels25">employeur</div>                          <div class="resumestylestandardlabelcontent25">french</div>                      </div>                      <div class="resumestylestandardtablerow25">                          <div class="resumestylestandardlabels25">date de demarrage</div>                          <div class="resumestylestandardlabelcontent25">                              <div class="table">                                  <div class="resumestylestandardlabelcontent25">                                      <div class="ellipsis">01/2009 date d'achevement</div>                                  </div>                                  <div class="resumestylestandardlabelcontent25">                                      <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>                                  </div>                              </div>                          </div>                      </div>                  </div>              </div>          </div>      </div>  </div>

or, view jsfiddle demo, can resize frame check:

working demo here


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more