這篇文章主要介紹“css單行截?cái)嗪投嘈薪財(cái)嗟挠梅ā?，在日常操作中，相信很多人在css單行截?cái)嗪投嘈薪財(cái)嗟挠梅▎栴}上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”css單行截?cái)嗪投嘈薪財(cái)嗟挠梅ā钡囊苫笥兴鶐椭?！接下來，?qǐng)跟著小編一起來學(xué)習(xí)吧！
重慶分公司
重慶分公司
span {
display: inline-block; // 如果不是block元素，還需要設(shè)置這個(gè)。
width: 150px; // 超出的寬度
overflow: hidden; // 超出隱藏
text-overflow: ellipsis; //超出用省略號(hào)
white-space: nowrap; // 不換行
}多行截?cái)嘤泻脦追N方法，
1： 最簡單，使用-webkit-line-clamp ， 當(dāng)然了，只能用在webkit內(nèi)核瀏覽器， 并且不支持自定義點(diǎn)擊展開的樣式。
p {
width: 400px; // 超過這個(gè)寬度
text-overflow: ellipsis; // 使用省略號(hào)
display: -webkit-box; // 必須使用這個(gè)
overflow: hidden;// 必須使用，超出隱藏
-webkit-line-clamp: 4; // 必需設(shè)置，
-webkit-box-orient: vertical; // 設(shè)置里面元素排列順序
text-align: justify; // 里面問題排列方式
}2: 也是面試中回答的方式，使用偽類。。。這個(gè)由于要使用js判斷是否超出，因此適用于，你已經(jīng)知道是大段文字的情景。 但是面試官不是很滿意這個(gè)方式，嗚嗚嗚
p{
position: relative;
height: 36px; // 面試官說這個(gè)是定死的，所以不靈活。。。感覺很奇怪啊，不是死的話，怎么知道什么情況溢出？
overflow: hidden;
line-height: 18px;
}
p::after{ // 這個(gè)是一直有省略號(hào)，所以需要js判斷是否超出，如果超出的話，就加一個(gè)class。
content: '...';
position: absolute;
bottom:0;
right: 0;
}3：使用float， 挺復(fù)雜的，不喜歡float......, 使用float時(shí)候，省略號(hào)是一個(gè)dom節(jié)點(diǎn)，因此可以添加事情和樣式， 自定義程度高！
