CSS English line break, prohibit line wrapping, display ellipsis

CSS Chinese-English line wrapping

1 Word-break:break-all; only works on English, with letters as the basis for line change 2 Word-wrap:break-word; only works on English, with words as the basis for line change 3 White-space:pre-wrap; only works on Chinese, Force line break 4 white-space:nowrap; Force no line break, all work 5 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; not wrapped, partially hidden and appearing as ellipses

CSS Ellipsis

{  width:200px;   word-break:break-all;   display:-webkit-box;   -webkit-line-clamp:2;   -webkit-box-orient:vertical;   Overflow:hidden;}

img Image box vertically centered inside

. Offer_img{Height:100%;width:100%;text-align:Center;vertical-align:Middle;padding:0.2rem;img{max-width:100%;Max-height:100%;Display:inline; }}.offer_img:after{content: "";Display:Inline-block;Height:100%;vertical-align:Middle;width:0;}

Clear floating

{  content: "";   display: table;}  {  clear: both;}  {  *zoom: 1;}

CSS Initialization reset.css

/** * Eric Meyer ' s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com*/html, body, Div, span, applet, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,A, ABBR, acronym, address, BI  G, cite, Code,del, DFN, EM, img, INS, KBD, Q, S, Samp,small, Strike, strong, sub, SUP, TT, VAR,B, u, I, CENTER,DL, DT, DD,  OL, UL, Li,fieldset, form, label, Legend,table, Caption, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, Embed,figure, figcaption, footer, Header,menu, nav, output, Ruby, section, Summary,time, mark, audio, video, input{margin:0;padding:0;Border:0;font-size:100%;Font-weight:Normal;vertical-align:Baseline;}/*HTML5 display-role reset for older browsers*/article, aside, details, figcaption, Figure,footer, Header, menu, nav, section{Display:Block;}Body{Line-height:1;}blockquote, Q{Quotes:None;}Blockquote:before, Blockquote:after,q:before, Q:after{content:None;}Table{Border-collapse:collapse;border-spacing:0;}/*Custom*/a{Color:#7e8c8d;text-decoration:None;-webkit-backface-visibility:Hidden;}Li{List-style:None;}::-webkit-scrollbar{width:5px;Height:5px;}::-webkit-scrollbar-track-piece{Background-color:rgba (0, 0, 0, 0.2);-webkit-border-radius:6px;}::-webkit-scrollbar-thumb:vertical{Height:5px;Background-color:Rgba (0.7 ,,,);-webkit-border-radius:6px;}::-webkit-scrollbar-thumb:horizontal{width:5px;Background-color:Rgba (0.7 ,,,);-webkit-border-radius:6px;}html, Body{width:100%;}Body{-webkit-text-size-adjust:None;-webkit-tap-highlight-color:rgba (0, 0, 0, 0);}

View Code

CSS English line break, prohibit line wrapping, display ellipsis