On Content Overflow Layout in Table Table Table


What is content spillover? In fact, when there are many words, if the content area is only that long, then the extra parts are replaced by dots.

The case we did this time is in the table. We know that when we type too much text into the table, we can mess up the table, such as when a line is too long or when it changes lines automatically. But sometimes we want to show in a fixed width line that if the extra part is replaced by a dot, it won’t mess up the table. So what should we do?

Generally speaking, we use the following attributes

CSS CodeCopy content to clipboard
  1. /* Overflow Partial Style*/  
  2. .txt-ell {   
  3.     whitewhite-space:nowrap; // Forced display in one line
  4.     overflow:hidden://Overflow content cutting hiding
  5.     text-overflowElpsis; // When inline overflow block containers, replace the overflow part with…
  6.     word-break:keep-all://Allow line breaks within words
  7.     colorred; // I’ll mark it here myself.
  8.     padding: 0 7px; / / / Since you want to keep a distance from the sideline, you set the following
  9. }  
CSS CodeCopy content to clipboard
  1. .table-fix {   
  2.     table-layout:fixed;     
  3. }  

First, the second style is specially added to the table label. To achieve content spillover, the table must have a fixed width and height, and the TR and TD in the table should also have a fixed width and height. Before overflowing content, add the table-fix class to the table. Then check whether your TR and TD are given width. If not, it’s better to give them a fixed percentage, or a fixed percentage. My main percentage is given to the outside table. The inside TR and TD are the width of the percentage, so that we can use the content spillover style. Finally, if there’s a lot of content in one grid and you want to implement a little bit, add a. txt-ell class to the lattice.

The content overflow layout method of the table table table is all the content shared by the editor. I hope to give you a reference, and I hope you will support developpaer more.

Original address: http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]