css - How to add ellipses without fixing the width? -


jsfiddle

.nowrap {      overflow: hidden;      white-space: nowrap;      /*width: 300px;*/      text-overflow: ellipsis;  }    .body {      color: #777;  }    table {      border-collapse: collapse;  }    td, th {      border: 1px solid black;      text-align: left;  }
<table>      <thead>          <tr>              <th>from</th>              <th>subject/body</th>          </tr>      </thead>      <tbody>          <tr>              <td>mark</td>              <td><div class="nowrap"><span class="subject">lorem ipsum</span>                  <span class="body"> &ndash; lorem ipsum dolor sit amet, consectetur adipiscing elit. integer tincidunt aliquet libero quis tempus. vivamus id est purus. nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. nullam non dolor tincidunt, mattis metus ac, feugiat sapien. interdum et malesuada fames ac ante ipsum primis in faucibus. integer mollis leo in tristique consectetur. quisque non imperdiet neque. nunc fermentum neque sit amet nulla interdum vestibulum. sed ac tempus dolor.</span></div>                </td>          </tr>      </tbody>  </table>

how can keep subject/body on 1 line, ellipses @ end, without fixing width of container?

if ellipses aren't possible, how @ least keep wrapping?

to prevent ellipsis overflows in table cell, set <table> table-layout:fixed , width:100%, , set fixed/percentage width on first column.

table {     border-collapse: collapse;     table-layout: fixed;     width: 100%; } th:first-child {     width: 50px; } 

table {      border-collapse: collapse;      table-layout: fixed;      width: 100%;  }  th, td {      border: 1px solid black;      text-align: left;  }  th:first-child {      width: 50px;  }  .ellipsis {      overflow: hidden;      white-space: nowrap;      text-overflow: ellipsis;  }
<table>      <thead>          <tr>              <th>from</th>              <th>subject/body</th>          </tr>      </thead>      <tbody>          <tr>              <td>mark</td>              <td>                  <div class="ellipsis">                      <span class="subject">lorem ipsum</span>                      <span class="body"> &ndash; lorem ipsum dolor sit amet, consectetur adipiscing elit. integer tincidunt aliquet libero quis tempus. vivamus id est purus. nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. nullam non dolor tincidunt, mattis metus ac, feugiat sapien. interdum et malesuada fames ac ante ipsum primis in faucibus. integer mollis leo in tristique consectetur. quisque non imperdiet neque. nunc fermentum neque sit amet nulla interdum vestibulum. sed ac tempus dolor.</span>                  </div>              </td>          </tr>      </tbody>  </table>

jsfiddle demo

for responsive table layouts, use 2 <div>s, , set them table , table-cell respectively, plus following styles.

.container {     display: table;     table-layout: fixed;     width: 100%; } .ellipsis {     display: table-cell;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; } 

table {      border-collapse: collapse;  }  th, td {      border: 1px solid black;      text-align: left;  }  .shrink {      white-space: nowrap;  }  .expand {      width: 99.999%;  }  .container {      display: table;      table-layout: fixed;      width: 100%;  }  .ellipsis {      display: table-cell;      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;  }
<table>      <thead>          <tr>              <th class="shrink">from</th>              <th class="expand">subject/body</th>          </tr>      </thead>      <tbody>          <tr>              <td class="shrink">mark</td>              <td class="expand">                  <div class="container">                      <div class="ellipsis">                          <span class="subject">lorem ipsum</span>                           <span class="body"> &ndash; lorem ipsum dolor sit amet, consectetur adipiscing elit. integer tincidunt aliquet libero quis tempus. vivamus id est purus. nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. nullam non dolor tincidunt, mattis metus ac, feugiat sapien. interdum et malesuada fames ac ante ipsum primis in faucibus. integer mollis leo in tristique consectetur. quisque non imperdiet neque. nunc fermentum neque sit amet nulla interdum vestibulum. sed ac tempus dolor.</span>                      </div>                  </div>              </td>          </tr>      </tbody>  </table>

jsfiddle demo


Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more