我最喜歡的隱藏溢出文本的新方法

作為 Web 開發人員，我們應該構建我們的網站，以便它們能夠容納可變長度的文本。您必須確保您的標記使用 50 個字符的用戶名看起來和使用 5 個字符的用戶名一樣好。過去，這只能通過在服務器端對文本進行切片或使用 JavaScript 來實現，但現在我們只能使用 CSS 來實現，這要歸功於 max-width 和 text-overflow 等屬性。

在這個簡短的教程中，我將向您展示我最喜歡的新技巧，它可以優雅地將溢出的文本淡入背景。

理念

通過設置 max-width 值，overflow:hidden 和一個 :after 偽元素，我們可以實現你在demo中看到的效果。以下是這些對我們的幫助：

• 元素會自由增加寬度，直到達到max-width.設置的值
• 此時，由於 overflow:hidden，所有多餘的文本都將被隱藏 財產。
• 為了防止文本換行，我們使用 white-space:nowrap.
• 為了在文本和元素的背景顏色之間創建平滑過渡，我們將使用 :after 偽元素。這個元素將有一個 linear-gradient 從透明到背景顏色。此元素位於容器的右側，僅在元素展開時才可見。

我發現這種技術比普通的 text-overflow:ellipsis 更好看 由於實際顯示了更多的文本，並且它與頁面的設計很好地融合在一起。然而，它的代價是需要更多的 CSS 行，並且您必須手動設置最大寬度。在某些情況下，當目標是更簡潔的設計時，付出額外的努力是值得的。

代碼

為了做好準備，我們應該先寫幾行 HTML：

index.html

<input type="text" value="This text will expand" />
<h2><span id="elem" class="overflow-300"></span> and this will shift to the side.</h2>

僅需要文本輸入以使訪問者能夠輕鬆更改內容，否則他們將不得不使用瀏覽器的開發人員工具。應用了溢出技術的元素是 #elem 跨度。我給了它一個名為 overflow-300 的類，我們將使用它在我們的 CSS 中實現該技術。

assets/css/styles.css

h2 span{
    font-weight:bold;
    display:inline-block;
    vertical-align: top;
}

要記住的一點是，我們不能設置 width 或 max-width 在設置為 display:inline 的元素上 （跨度元素的默認顯示）。這需要我們給它一個顯示 inline-block .這是技術本身：

.overflow-300{
    overflow:hidden;
    max-width:300px;
    position:relative;
    white-space: nowrap;
}

.overflow-300:after{
    content:'';
    position: absolute;

    left:300px;
    margin-left: -40px;
    width: 40px;
    height:100%;
    top:0;
    background:linear-gradient(to right, rgba(240, 244, 245, 0), rgba(240, 244, 245, 1));
}

如果要更改元素的最大寬度，還需要更改 :after 的左側值 元素。

最後，我們有一些 jQuery 會監聽文本框上的文本輸入事件，並更新 span 的內容：

assets/js/script.js

$(function(){

    var elem = $('#elem'),
        textbox = $('input[type=text]');

    textbox.on('input', function(){
        elem.text(textbox.val());
    });

    textbox.trigger('input');
});

這樣，我們的甜蜜文本溢出技術就準備好了！ 你有什麼建議或其他方便的技巧嗎？在評論部分分享它們。