標籤：css js
最近在做聊天記錄需求時，對於查到的訊息體需要高亮顯示，前後內容超出需要顯示省略號，效果如下圖：
對於後省略號是可以通過的一串css來實現的，主要是css的**段如下：
/*css省略號**段*/
overflow: hidden;
text-overflow: ellipsis;
position: relative;
white-space: nowrap;
關健**
#container
#container div
let keywords = "測試";
let container = document.queryselector('#container');
let containerwidth = container.offsetwidth;
wordlist.foreach((word) => else
}})function createspan(word)
實現原理
同事提供的方式是可行的，只是我考慮到通過canvas去繪會有一定成本，於是一直在思考是否可以通過純css來解決，猛的突然想到文字是可以控制方向的，於是通過把內容分成三段：前面文字+關鍵字+後面文字，改變第一段文字的文字渲染方向，再用css省略號**段去自動實現前後**的省略號
關鍵**
這裡是前面的內容哦，67890123456
關鍵字這裡是後面後文字哦，啦啦啦啦
.text_test
.text_test span
.text_test span:nth-of-type(1)
.text_test span:nth-of-type(2)
文字超出省略號型別
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行overflow hidden text overflow ellipsis display webkit box 作為彈性伸縮盒子模型顯示...
css 文字超出省略號，單行省略號和多行省略號
doctype html en utf 8 viewport content width device width,initial scale 1.0 document title html,body width 1000px padding 50px 30px margin 50px auto b...
css xx行超出省略號
line clamp1 兩行超出 line clamp2 前提 設定乙個寬度 目前沒有瀏覽器支援 box orient 屬性。firefox 支援替代的 moz box orient 屬性。safari opera 以及 chrome 支援替代的 webkit box orient 屬性。box o...