[{"data":1,"prerenderedAt":1302},["ShallowReactive",2],{"\u002Fposts\u002Fd2e7adb":3,"surround-\u002Fposts\u002Fd2e7adb":1291},{"id":4,"title":5,"body":6,"categories":1268,"date":1270,"description":1271,"draft":1272,"extension":1273,"image":1274,"meta":1275,"navigation":101,"path":1277,"permalink":1277,"published":1274,"readingTime":1278,"recommend":1283,"references":1274,"seo":1284,"sitemap":1285,"stem":1286,"tags":1287,"type":1289,"updated":1270,"__hash__":1290},"content\u002Fposts\u002F2024\u002FCSS多行溢出，兼容性比较好的做法.md","CSS多行溢出，兼容性比较好的做法",{"type":7,"value":8,"toc":1264},"minimark",[9,13,16,19,24,31,113,184,189,322,356,361,437,441,1261],[10,11,12],"p",{},"原生css提供的做法在兼容性上做的不太好，FireFox或者Safari支持都不太好，可以换个思路，有另外一种实现方法。",[10,14,15],{},"用JS去计算文字显示长度，然后再截取计算效果也不好，中英文文字字宽都不相同，同样英文字母的宽度I 和 G的宽度也不一样。",[10,17,18],{},"可以利用css的float浮动布局，浮动布局有个天然的特性就是文字环绕，附近的文字会自动避开浮动的元素。",[20,21,23],"h2",{"id":22},"实现步骤","实现步骤：",[25,26,27],"ol",{},[28,29,30],"li",{},"准备一个父容器，设置一些背景色，边框，内边距，方便看效果",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-html shiki shiki-themes catppuccin-latte one-dark-pro","\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \n    \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\n","html","",[39,40,41,57,79,86,96,103],"code",{"__ignoreMap":37},[42,43,46,50,54],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sxizN","\u003C",[42,51,53],{"class":52},"sGF2L","body",[42,55,56],{"class":48},">\n",[42,58,60,63,66,70,73,77],{"class":44,"line":59},2,[42,61,62],{"class":48},"    \u003C",[42,64,65],{"class":52},"div",[42,67,69],{"class":68},"sK5Ct"," class",[42,71,72],{"class":48},"=",[42,74,76],{"class":75},"sw_MA","\"container\"",[42,78,56],{"class":48},[42,80,82],{"class":44,"line":81},3,[42,83,85],{"class":84},"sa2x1","        \n",[42,87,89,92,94],{"class":44,"line":88},4,[42,90,91],{"class":48},"    \u003C\u002F",[42,93,65],{"class":52},[42,95,56],{"class":48},[42,97,99],{"class":44,"line":98},5,[42,100,102],{"emptyLinePlaceholder":101},true,"\n",[42,104,106,109,111],{"class":44,"line":105},6,[42,107,108],{"class":48},"\u003C\u002F",[42,110,53],{"class":52},[42,112,56],{"class":48},[32,114,118],{"className":115,"code":116,"language":117,"meta":37,"style":37},"language-css shiki shiki-themes catppuccin-latte one-dark-pro",":root {\n    --line: 6em; \u002F* 超过6行后显示省略号 *\u002F\n}\n\n.container {\n    margin: 1em auto;\n    width: 60%;\n    height: calc(var(--line) + 2em);\n    border: 1px solid black;\n    background-color: aqua;\n    padding: 1em;\n}\n","css",[39,119,120,125,130,135,139,144,149,155,161,167,173,179],{"__ignoreMap":37},[42,121,122],{"class":44,"line":45},[42,123,124],{},":root {\n",[42,126,127],{"class":44,"line":59},[42,128,129],{},"    --line: 6em; \u002F* 超过6行后显示省略号 *\u002F\n",[42,131,132],{"class":44,"line":81},[42,133,134],{},"}\n",[42,136,137],{"class":44,"line":88},[42,138,102],{"emptyLinePlaceholder":101},[42,140,141],{"class":44,"line":98},[42,142,143],{},".container {\n",[42,145,146],{"class":44,"line":105},[42,147,148],{},"    margin: 1em auto;\n",[42,150,152],{"class":44,"line":151},7,[42,153,154],{},"    width: 60%;\n",[42,156,158],{"class":44,"line":157},8,[42,159,160],{},"    height: calc(var(--line) + 2em);\n",[42,162,164],{"class":44,"line":163},9,[42,165,166],{},"    border: 1px solid black;\n",[42,168,170],{"class":44,"line":169},10,[42,171,172],{},"    background-color: aqua;\n",[42,174,176],{"class":44,"line":175},11,[42,177,178],{},"    padding: 1em;\n",[42,180,182],{"class":44,"line":181},12,[42,183,134],{},[25,185,186],{"start":59},[28,187,188],{},"准备文本盒子，填充文字内容，把省略号单独放在一个容器内。",[32,190,192],{"className":34,"code":191,"language":36,"meta":37,"style":37},"\u003Cdiv class=\"container\">\n    \u003Cdiv class=\"text-container\">\n        \u003Cdiv class=\"more\">······\u003C\u002Fdiv>\n\n        \u003Cdiv class=\"content\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae\n            quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae\n            quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae\n            quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.\n        \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n",[39,193,194,208,223,249,253,268,273,278,282,287,296,300,308,313],{"__ignoreMap":37},[42,195,196,198,200,202,204,206],{"class":44,"line":45},[42,197,49],{"class":48},[42,199,65],{"class":52},[42,201,69],{"class":68},[42,203,72],{"class":48},[42,205,76],{"class":75},[42,207,56],{"class":48},[42,209,210,212,214,216,218,221],{"class":44,"line":59},[42,211,62],{"class":48},[42,213,65],{"class":52},[42,215,69],{"class":68},[42,217,72],{"class":48},[42,219,220],{"class":75},"\"text-container\"",[42,222,56],{"class":48},[42,224,225,228,230,232,234,237,240,243,245,247],{"class":44,"line":81},[42,226,227],{"class":48},"        \u003C",[42,229,65],{"class":52},[42,231,69],{"class":68},[42,233,72],{"class":48},[42,235,236],{"class":75},"\"more\"",[42,238,239],{"class":48},">",[42,241,242],{"class":84},"······",[42,244,108],{"class":48},[42,246,65],{"class":52},[42,248,56],{"class":48},[42,250,251],{"class":44,"line":88},[42,252,102],{"emptyLinePlaceholder":101},[42,254,255,257,259,261,263,266],{"class":44,"line":98},[42,256,227],{"class":48},[42,258,65],{"class":52},[42,260,69],{"class":68},[42,262,72],{"class":48},[42,264,265],{"class":75},"\"content\"",[42,267,56],{"class":48},[42,269,270],{"class":44,"line":105},[42,271,272],{"class":84},"            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae\n",[42,274,275],{"class":44,"line":151},[42,276,277],{"class":84},"            quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium non tenetur quae\n",[42,279,280],{"class":44,"line":157},[42,281,277],{"class":84},[42,283,284],{"class":44,"line":163},[42,285,286],{"class":84},"            quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem impedit alias.\n",[42,288,289,292,294],{"class":44,"line":169},[42,290,291],{"class":48},"        \u003C\u002F",[42,293,65],{"class":52},[42,295,56],{"class":48},[42,297,298],{"class":44,"line":175},[42,299,102],{"emptyLinePlaceholder":101},[42,301,302,304,306],{"class":44,"line":181},[42,303,91],{"class":48},[42,305,65],{"class":52},[42,307,56],{"class":48},[42,309,311],{"class":44,"line":310},13,[42,312,102],{"emptyLinePlaceholder":101},[42,314,316,318,320],{"class":44,"line":315},14,[42,317,108],{"class":48},[42,319,65],{"class":52},[42,321,56],{"class":48},[32,323,325],{"className":115,"code":324,"language":117,"meta":37,"style":37},".text-container {\n    word-break: break-all;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n",[39,326,327,332,337,342,347,352],{"__ignoreMap":37},[42,328,329],{"class":44,"line":45},[42,330,331],{},".text-container {\n",[42,333,334],{"class":44,"line":59},[42,335,336],{},"    word-break: break-all;\n",[42,338,339],{"class":44,"line":81},[42,340,341],{},"    width: 100%;\n",[42,343,344],{"class":44,"line":88},[42,345,346],{},"    height: 100%;\n",[42,348,349],{"class":44,"line":98},[42,350,351],{},"    overflow: hidden;\n",[42,353,354],{"class":44,"line":105},[42,355,134],{},[25,357,358],{"start":81},[28,359,360],{},"利用浮动，将省略号定位到文本盒子的右下角，我这里的做法是增加一个伪类元素，将浮动的省略号挤下去，然后文字内容再通过负的外边距移上来。",[32,362,364],{"className":115,"code":363,"language":117,"meta":37,"style":37},".text-container::before {\n    content: '';\n    height: calc(var(--line) + 1em);\n    display: block;\n    \u002F* background: red; *\u002F\n}\n\n.more {\n    float: right;\n}\n\n.content {\n    margin-top: calc(0em - var(--line) - 1em);\n    font-family: 'JetBrains Mono', monospace;\n}\n",[39,365,366,371,376,381,386,391,395,399,404,409,413,417,422,427,432],{"__ignoreMap":37},[42,367,368],{"class":44,"line":45},[42,369,370],{},".text-container::before {\n",[42,372,373],{"class":44,"line":59},[42,374,375],{},"    content: '';\n",[42,377,378],{"class":44,"line":81},[42,379,380],{},"    height: calc(var(--line) + 1em);\n",[42,382,383],{"class":44,"line":88},[42,384,385],{},"    display: block;\n",[42,387,388],{"class":44,"line":98},[42,389,390],{},"    \u002F* background: red; *\u002F\n",[42,392,393],{"class":44,"line":105},[42,394,134],{},[42,396,397],{"class":44,"line":151},[42,398,102],{"emptyLinePlaceholder":101},[42,400,401],{"class":44,"line":157},[42,402,403],{},".more {\n",[42,405,406],{"class":44,"line":163},[42,407,408],{},"    float: right;\n",[42,410,411],{"class":44,"line":169},[42,412,134],{},[42,414,415],{"class":44,"line":175},[42,416,102],{"emptyLinePlaceholder":101},[42,418,419],{"class":44,"line":181},[42,420,421],{},".content {\n",[42,423,424],{"class":44,"line":310},[42,425,426],{},"    margin-top: calc(0em - var(--line) - 1em);\n",[42,428,429],{"class":44,"line":315},[42,430,431],{},"    font-family: 'JetBrains Mono', monospace;\n",[42,433,435],{"class":44,"line":434},15,[42,436,134],{},[20,438,440],{"id":439},"完整代码","完整代码：",[32,442,444],{"className":34,"code":443,"language":36,"meta":37,"style":37},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>多行文本溢出\u003C\u002Ftitle>\n\n    \u003Cstyle>\n        :root {\n            --line: 6em; \u002F* 超过6行后显示省略号 *\u002F\n        }\n\n        .container {\n            margin: 1em auto;\n            width: 60%;\n            height: calc(var(--line) + 2em);\n            border: 1px solid black;\n            background-color: aqua;\n            padding: 1em;\n        }\n\n        .text-container {\n            word-break: break-all;\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n        }\n\n        .text-container::before {\n            content: '';\n            height: calc(var(--line) + 1em);\n            display: block;\n            \u002F* background: red; *\u002F\n        }\n\n        .more {\n            float: right;\n        }\n\n        .content {\n            margin-top: calc(0em - var(--line) - 1em);\n            font-family: 'JetBrains Mono', monospace;\n        }\n    \u003C\u002Fstyle>\n\n\u003C\u002Fhead>\n\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"text-container\">\n            \u003Cdiv class=\"more\">······\u003C\u002Fdiv>\n\n            \u003Cdiv class=\"content\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium\n                non tenetur quae quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum\n                accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium\n                itaque harum praesentium non tenetur quae\n                quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem\n                impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum\n                praesentium non tenetur quae\n                quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem\n                impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum\n                praesentium non tenetur quae\n                quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem\n                impedit alias.\n            \u003C\u002Fdiv>\n\n        \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n\n",[39,445,446,461,477,481,490,507,531,549,553,562,576,598,603,607,618,638,655,693,714,727,741,746,751,761,774,788,801,814,819,824,840,853,880,893,899,904,909,919,932,937,942,952,989,1008,1013,1025,1030,1039,1044,1053,1068,1083,1107,1112,1127,1133,1139,1145,1151,1157,1163,1169,1174,1179,1184,1189,1195,1205,1210,1219,1224,1233,1238,1247,1252],{"__ignoreMap":37},[42,447,448,452,456,459],{"class":44,"line":45},[42,449,451],{"class":450},"s1y-z","\u003C!",[42,453,455],{"class":454},"sW0bi","DOCTYPE",[42,457,458],{"class":68}," html",[42,460,56],{"class":450},[42,462,463,465,467,470,472,475],{"class":44,"line":59},[42,464,49],{"class":48},[42,466,36],{"class":52},[42,468,469],{"class":68}," lang",[42,471,72],{"class":48},[42,473,474],{"class":75},"\"zh-CN\"",[42,476,56],{"class":48},[42,478,479],{"class":44,"line":81},[42,480,102],{"emptyLinePlaceholder":101},[42,482,483,485,488],{"class":44,"line":88},[42,484,49],{"class":48},[42,486,487],{"class":52},"head",[42,489,56],{"class":48},[42,491,492,494,497,500,502,505],{"class":44,"line":98},[42,493,62],{"class":48},[42,495,496],{"class":52},"meta",[42,498,499],{"class":68}," charset",[42,501,72],{"class":48},[42,503,504],{"class":75},"\"UTF-8\"",[42,506,56],{"class":48},[42,508,509,511,513,516,518,521,524,526,529],{"class":44,"line":105},[42,510,62],{"class":48},[42,512,496],{"class":52},[42,514,515],{"class":68}," name",[42,517,72],{"class":48},[42,519,520],{"class":75},"\"viewport\"",[42,522,523],{"class":68}," content",[42,525,72],{"class":48},[42,527,528],{"class":75},"\"width=device-width, initial-scale=1.0\"",[42,530,56],{"class":48},[42,532,533,535,538,540,543,545,547],{"class":44,"line":151},[42,534,62],{"class":48},[42,536,537],{"class":52},"title",[42,539,239],{"class":48},[42,541,542],{"class":84},"多行文本溢出",[42,544,108],{"class":48},[42,546,537],{"class":52},[42,548,56],{"class":48},[42,550,551],{"class":44,"line":157},[42,552,102],{"emptyLinePlaceholder":101},[42,554,555,557,560],{"class":44,"line":163},[42,556,62],{"class":48},[42,558,559],{"class":52},"style",[42,561,56],{"class":48},[42,563,564,568,572],{"class":44,"line":169},[42,565,567],{"class":566},"sNE1e","        :",[42,569,571],{"class":570},"sqgB4","root",[42,573,575],{"class":574},"sgT6j"," {\n",[42,577,578,581,584,588,591,594],{"class":44,"line":175},[42,579,580],{"class":52},"            --line",[42,582,583],{"class":48},":",[42,585,587],{"class":586},"sYQis"," 6",[42,589,590],{"class":454},"em",[42,592,593],{"class":574},";",[42,595,597],{"class":596},"skYY2"," \u002F* 超过6行后显示省略号 *\u002F\n",[42,599,600],{"class":44,"line":181},[42,601,602],{"class":574},"        }\n",[42,604,605],{"class":44,"line":310},[42,606,102],{"emptyLinePlaceholder":101},[42,608,609,613,616],{"class":44,"line":315},[42,610,612],{"class":611},"sGpC2","        .",[42,614,615],{"class":68},"container",[42,617,575],{"class":574},[42,619,620,624,626,629,631,635],{"class":44,"line":434},[42,621,623],{"class":622},"s3Kwp","            margin",[42,625,583],{"class":48},[42,627,628],{"class":586}," 1",[42,630,590],{"class":454},[42,632,634],{"class":633},"sJ4Hi"," auto",[42,636,637],{"class":574},";\n",[42,639,641,644,646,649,653],{"class":44,"line":640},16,[42,642,643],{"class":622},"            width",[42,645,583],{"class":48},[42,647,648],{"class":586}," 60",[42,650,652],{"class":651},"sRP0W","%",[42,654,637],{"class":574},[42,656,658,661,663,667,670,673,675,679,682,685,688,690],{"class":44,"line":657},17,[42,659,660],{"class":622},"            height",[42,662,583],{"class":48},[42,664,666],{"class":665},"sM7PQ"," calc",[42,668,669],{"class":574},"(",[42,671,672],{"class":665},"var",[42,674,669],{"class":574},[42,676,678],{"class":677},"sih00","--line",[42,680,681],{"class":574},")",[42,683,684],{"class":570}," +",[42,686,687],{"class":586}," 2",[42,689,590],{"class":454},[42,691,692],{"class":574},");\n",[42,694,696,699,701,703,706,709,712],{"class":44,"line":695},18,[42,697,698],{"class":622},"            border",[42,700,583],{"class":48},[42,702,628],{"class":586},[42,704,705],{"class":454},"px",[42,707,708],{"class":633}," solid",[42,710,711],{"class":633}," black",[42,713,637],{"class":574},[42,715,717,720,722,725],{"class":44,"line":716},19,[42,718,719],{"class":622},"            background-color",[42,721,583],{"class":48},[42,723,724],{"class":633}," aqua",[42,726,637],{"class":574},[42,728,730,733,735,737,739],{"class":44,"line":729},20,[42,731,732],{"class":622},"            padding",[42,734,583],{"class":48},[42,736,628],{"class":586},[42,738,590],{"class":454},[42,740,637],{"class":574},[42,742,744],{"class":44,"line":743},21,[42,745,602],{"class":574},[42,747,749],{"class":44,"line":748},22,[42,750,102],{"emptyLinePlaceholder":101},[42,752,754,756,759],{"class":44,"line":753},23,[42,755,612],{"class":611},[42,757,758],{"class":68},"text-container",[42,760,575],{"class":574},[42,762,764,767,769,772],{"class":44,"line":763},24,[42,765,766],{"class":622},"            word-break",[42,768,583],{"class":48},[42,770,771],{"class":633}," break-all",[42,773,637],{"class":574},[42,775,777,779,781,784,786],{"class":44,"line":776},25,[42,778,643],{"class":622},[42,780,583],{"class":48},[42,782,783],{"class":586}," 100",[42,785,652],{"class":651},[42,787,637],{"class":574},[42,789,791,793,795,797,799],{"class":44,"line":790},26,[42,792,660],{"class":622},[42,794,583],{"class":48},[42,796,783],{"class":586},[42,798,652],{"class":651},[42,800,637],{"class":574},[42,802,804,807,809,812],{"class":44,"line":803},27,[42,805,806],{"class":622},"            overflow",[42,808,583],{"class":48},[42,810,811],{"class":633}," hidden",[42,813,637],{"class":574},[42,815,817],{"class":44,"line":816},28,[42,818,602],{"class":574},[42,820,822],{"class":44,"line":821},29,[42,823,102],{"emptyLinePlaceholder":101},[42,825,827,829,831,834,838],{"class":44,"line":826},30,[42,828,612],{"class":611},[42,830,758],{"class":68},[42,832,833],{"class":566},"::",[42,835,837],{"class":836},"si1XZ","before",[42,839,575],{"class":574},[42,841,843,846,848,851],{"class":44,"line":842},31,[42,844,845],{"class":622},"            content",[42,847,583],{"class":48},[42,849,850],{"class":75}," ''",[42,852,637],{"class":574},[42,854,856,858,860,862,864,866,868,870,872,874,876,878],{"class":44,"line":855},32,[42,857,660],{"class":622},[42,859,583],{"class":48},[42,861,666],{"class":665},[42,863,669],{"class":574},[42,865,672],{"class":665},[42,867,669],{"class":574},[42,869,678],{"class":677},[42,871,681],{"class":574},[42,873,684],{"class":570},[42,875,628],{"class":586},[42,877,590],{"class":454},[42,879,692],{"class":574},[42,881,883,886,888,891],{"class":44,"line":882},33,[42,884,885],{"class":622},"            display",[42,887,583],{"class":48},[42,889,890],{"class":633}," block",[42,892,637],{"class":574},[42,894,896],{"class":44,"line":895},34,[42,897,898],{"class":596},"            \u002F* background: red; *\u002F\n",[42,900,902],{"class":44,"line":901},35,[42,903,602],{"class":574},[42,905,907],{"class":44,"line":906},36,[42,908,102],{"emptyLinePlaceholder":101},[42,910,912,914,917],{"class":44,"line":911},37,[42,913,612],{"class":611},[42,915,916],{"class":68},"more",[42,918,575],{"class":574},[42,920,922,925,927,930],{"class":44,"line":921},38,[42,923,924],{"class":622},"            float",[42,926,583],{"class":48},[42,928,929],{"class":633}," right",[42,931,637],{"class":574},[42,933,935],{"class":44,"line":934},39,[42,936,602],{"class":574},[42,938,940],{"class":44,"line":939},40,[42,941,102],{"emptyLinePlaceholder":101},[42,943,945,947,950],{"class":44,"line":944},41,[42,946,612],{"class":611},[42,948,949],{"class":68},"content",[42,951,575],{"class":574},[42,953,955,958,960,962,964,967,969,972,975,977,979,981,983,985,987],{"class":44,"line":954},42,[42,956,957],{"class":622},"            margin-top",[42,959,583],{"class":48},[42,961,666],{"class":665},[42,963,669],{"class":574},[42,965,966],{"class":586},"0",[42,968,590],{"class":454},[42,970,971],{"class":570}," -",[42,973,974],{"class":665}," var",[42,976,669],{"class":574},[42,978,678],{"class":677},[42,980,681],{"class":574},[42,982,971],{"class":570},[42,984,628],{"class":586},[42,986,590],{"class":454},[42,988,692],{"class":574},[42,990,992,995,997,1000,1003,1006],{"class":44,"line":991},43,[42,993,994],{"class":622},"            font-family",[42,996,583],{"class":48},[42,998,999],{"class":75}," 'JetBrains Mono'",[42,1001,1002],{"class":574},",",[42,1004,1005],{"class":633}," monospace",[42,1007,637],{"class":574},[42,1009,1011],{"class":44,"line":1010},44,[42,1012,602],{"class":574},[42,1014,1016,1018,1021,1023],{"class":44,"line":1015},45,[42,1017,62],{"class":84},[42,1019,1020],{"class":48},"\u002F",[42,1022,559],{"class":52},[42,1024,56],{"class":48},[42,1026,1028],{"class":44,"line":1027},46,[42,1029,102],{"emptyLinePlaceholder":101},[42,1031,1033,1035,1037],{"class":44,"line":1032},47,[42,1034,108],{"class":48},[42,1036,487],{"class":52},[42,1038,56],{"class":48},[42,1040,1042],{"class":44,"line":1041},48,[42,1043,102],{"emptyLinePlaceholder":101},[42,1045,1047,1049,1051],{"class":44,"line":1046},49,[42,1048,49],{"class":48},[42,1050,53],{"class":52},[42,1052,56],{"class":48},[42,1054,1056,1058,1060,1062,1064,1066],{"class":44,"line":1055},50,[42,1057,62],{"class":48},[42,1059,65],{"class":52},[42,1061,69],{"class":68},[42,1063,72],{"class":48},[42,1065,76],{"class":75},[42,1067,56],{"class":48},[42,1069,1071,1073,1075,1077,1079,1081],{"class":44,"line":1070},51,[42,1072,227],{"class":48},[42,1074,65],{"class":52},[42,1076,69],{"class":68},[42,1078,72],{"class":48},[42,1080,220],{"class":75},[42,1082,56],{"class":48},[42,1084,1086,1089,1091,1093,1095,1097,1099,1101,1103,1105],{"class":44,"line":1085},52,[42,1087,1088],{"class":48},"            \u003C",[42,1090,65],{"class":52},[42,1092,69],{"class":68},[42,1094,72],{"class":48},[42,1096,236],{"class":75},[42,1098,239],{"class":48},[42,1100,242],{"class":84},[42,1102,108],{"class":48},[42,1104,65],{"class":52},[42,1106,56],{"class":48},[42,1108,1110],{"class":44,"line":1109},53,[42,1111,102],{"emptyLinePlaceholder":101},[42,1113,1115,1117,1119,1121,1123,1125],{"class":44,"line":1114},54,[42,1116,1088],{"class":48},[42,1118,65],{"class":52},[42,1120,69],{"class":68},[42,1122,72],{"class":48},[42,1124,265],{"class":75},[42,1126,56],{"class":48},[42,1128,1130],{"class":44,"line":1129},55,[42,1131,1132],{"class":84},"                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum praesentium\n",[42,1134,1136],{"class":44,"line":1135},56,[42,1137,1138],{"class":84},"                non tenetur quae quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum\n",[42,1140,1142],{"class":44,"line":1141},57,[42,1143,1144],{"class":84},"                accusamus rem impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium\n",[42,1146,1148],{"class":44,"line":1147},58,[42,1149,1150],{"class":84},"                itaque harum praesentium non tenetur quae\n",[42,1152,1154],{"class":44,"line":1153},59,[42,1155,1156],{"class":84},"                quas, incidunt provident doloribus accusantium optio, nihil consectetur. Pariatur rerum accusamus rem\n",[42,1158,1160],{"class":44,"line":1159},60,[42,1161,1162],{"class":84},"                impedit alias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, laudantium itaque harum\n",[42,1164,1166],{"class":44,"line":1165},61,[42,1167,1168],{"class":84},"                praesentium non tenetur quae\n",[42,1170,1172],{"class":44,"line":1171},62,[42,1173,1156],{"class":84},[42,1175,1177],{"class":44,"line":1176},63,[42,1178,1162],{"class":84},[42,1180,1182],{"class":44,"line":1181},64,[42,1183,1168],{"class":84},[42,1185,1187],{"class":44,"line":1186},65,[42,1188,1156],{"class":84},[42,1190,1192],{"class":44,"line":1191},66,[42,1193,1194],{"class":84},"                impedit alias.\n",[42,1196,1198,1201,1203],{"class":44,"line":1197},67,[42,1199,1200],{"class":48},"            \u003C\u002F",[42,1202,65],{"class":52},[42,1204,56],{"class":48},[42,1206,1208],{"class":44,"line":1207},68,[42,1209,102],{"emptyLinePlaceholder":101},[42,1211,1213,1215,1217],{"class":44,"line":1212},69,[42,1214,291],{"class":48},[42,1216,65],{"class":52},[42,1218,56],{"class":48},[42,1220,1222],{"class":44,"line":1221},70,[42,1223,102],{"emptyLinePlaceholder":101},[42,1225,1227,1229,1231],{"class":44,"line":1226},71,[42,1228,91],{"class":48},[42,1230,65],{"class":52},[42,1232,56],{"class":48},[42,1234,1236],{"class":44,"line":1235},72,[42,1237,102],{"emptyLinePlaceholder":101},[42,1239,1241,1243,1245],{"class":44,"line":1240},73,[42,1242,108],{"class":48},[42,1244,53],{"class":52},[42,1246,56],{"class":48},[42,1248,1250],{"class":44,"line":1249},74,[42,1251,102],{"emptyLinePlaceholder":101},[42,1253,1255,1257,1259],{"class":44,"line":1254},75,[42,1256,108],{"class":48},[42,1258,36],{"class":52},[42,1260,56],{"class":48},[559,1262,1263],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sxizN, html code.shiki .sxizN{--shiki-default:#179299;--shiki-dark:#ABB2BF}html pre.shiki code .sGF2L, html code.shiki .sGF2L{--shiki-default:#1E66F5;--shiki-dark:#E06C75}html pre.shiki code .sK5Ct, html code.shiki .sK5Ct{--shiki-default:#DF8E1D;--shiki-dark:#D19A66}html pre.shiki code .sw_MA, html code.shiki .sw_MA{--shiki-default:#40A02B;--shiki-dark:#98C379}html pre.shiki code .sa2x1, html code.shiki .sa2x1{--shiki-default:#4C4F69;--shiki-dark:#ABB2BF}html pre.shiki code .s1y-z, html code.shiki .s1y-z{--shiki-default:#8839EF;--shiki-dark:#ABB2BF}html pre.shiki code .sW0bi, html code.shiki .sW0bi{--shiki-default:#8839EF;--shiki-dark:#E06C75}html pre.shiki code .sNE1e, html code.shiki .sNE1e{--shiki-default:#7C7F93;--shiki-dark:#56B6C2}html pre.shiki code .sqgB4, html code.shiki .sqgB4{--shiki-default:#179299;--shiki-dark:#56B6C2}html pre.shiki code .sgT6j, html code.shiki .sgT6j{--shiki-default:#7C7F93;--shiki-dark:#ABB2BF}html pre.shiki code .sYQis, html code.shiki .sYQis{--shiki-default:#FE640B;--shiki-dark:#D19A66}html pre.shiki code .skYY2, html code.shiki .skYY2{--shiki-default:#7C7F93;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html pre.shiki code .sGpC2, html code.shiki .sGpC2{--shiki-default:#7C7F93;--shiki-dark:#D19A66}html pre.shiki code .s3Kwp, html code.shiki .s3Kwp{--shiki-default:#1E66F5;--shiki-dark:#ABB2BF}html pre.shiki code .sJ4Hi, html code.shiki .sJ4Hi{--shiki-default:#4C4F69;--shiki-dark:#D19A66}html pre.shiki code .sRP0W, html code.shiki .sRP0W{--shiki-default:#FE640B;--shiki-dark:#E06C75}html pre.shiki code .sM7PQ, html code.shiki .sM7PQ{--shiki-default:#1E66F5;--shiki-default-font-style:italic;--shiki-dark:#56B6C2;--shiki-dark-font-style:inherit}html pre.shiki code .sih00, html code.shiki .sih00{--shiki-default:#E64553;--shiki-dark:#E06C75}html pre.shiki code .si1XZ, html code.shiki .si1XZ{--shiki-default:#DF8E1D;--shiki-dark:#56B6C2}",{"title":37,"searchDepth":88,"depth":88,"links":1265},[1266,1267],{"id":22,"depth":59,"text":23},{"id":439,"depth":59,"text":440},[1269],"开发","2024-08-02 05:52:01","原生css提供的做法在兼容性上做的不太好，FireFox或者Safari支持都不太好，可以换个思路，有另外一种实现方法。用JS去计算文字显示长度，然后再截取计算效果也不好，中英文文字字宽都不相同，同样英文字母的宽度I 和 G的宽度也不一样。可以利用css的float浮动布局，浮动布局有个天然的特性就是文字环绕，附近的文字会自动避开浮动的元素。",false,"md",null,{"slots":1276},{},"\u002Fposts\u002Fd2e7adb",{"text":1279,"minutes":1280,"time":1281,"words":1282},"4 min read",3.505,210300,701,0,{"title":5,"description":1271},{"loc":1277},"posts\u002F2024\u002FCSS多行溢出，兼容性比较好的做法",[1288],"CSS","tech","eQitsScC9i5mXOgMhux_sFqYbntSwlbXbhzdmP1cj6M",[1292,1297],{"title":1293,"path":1294,"stem":1295,"date":1296,"type":1289,"children":-1},"Hadoop集群搭建（1主2从）","\u002Fposts\u002Fd06540f2","posts\u002F2024\u002FHadoop集群搭建（1主2从）","2024-04-18 06:26:21",{"title":1298,"path":1299,"stem":1300,"date":1301,"type":1289,"children":-1},"NPM包管理工具的幻影依赖问题","\u002Fposts\u002F8a960ce","posts\u002F2024\u002FNPM包管理工具的幻影依赖问题","2024-08-27 05:56:13",1776347332253]