單行文本溢出

單行文本溢出指的是在一行文本的末尾，當文本內容超出容器的寬度時，文本將會出現溢出的情況。在現代Web開發中，單行文本溢出是一個非常普遍的問題。在下面的文章中，我們將從多個方面對單行文本溢出做詳細的闡述。

一、CSS屬性text-overflow

CSS屬性text-overflow可以用來設置文本當溢出時如何表現。 text-overflow屬性有三個可能的值: clip、ellipsis、和string。clip值表示將文本裁剪掉，不顯示多餘的部分，而ellipsis值則表示用省略號表示被截取的部分，最後一個值string表示，超出的內容使用具體的值來替代。下面是一個示例:

.overflow-text {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

上面的代碼將會設置一個寬度200像素的文本容器，並使用text-overflow屬性讓文本超出時自動顯示省略號。務必要設置white-space: nowrap;來保證文本只顯示一行。

二、DOM操作與JS計算

當我們無法使用CSS溢出屬性時，可以使用JavaScript來計算文本的長度並自動裁剪：

var text = document.querySelector('.text');
var container = document.querySelector('.container');
var textWidth = text.offsetWidth;
var containerWidth = container.offsetWidth;

if(textWidth > containerWidth){
  text.textContent = text.textContent.replace(/\.\.\.$/, '') + '...';
  while(textWidth > containerWidth && text.textContent.length > 0) {
    text.textContent = text.textContent.slice(0, -2);
    textWidth = text.offsetWidth;
  }
}

上面的代碼應用了一個while循環和JavaScript字元串slice()方法。 當文本超過容器寬度時，向文本添加省略號並截取文本的最後兩個字元，並在每次循環中重新計算文本的長度。

三、使用Flexbox

Flexbox 是一個非常靈活的布局模型，非常適用於單行溢出問題。可以使用 flex-basis 和 flex-shrink 屬性來動態設置元素的大小，這樣可以很方便地實現單行文本溢出的效果。示例代碼如下：

.container {
  display: flex;
  overflow: hidden;
}

.text {
  flex-basis: 0;
  flex-shrink: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上面的代碼將使用flexbox的方式動態調整容器和文本的大小，從而達到單行文本溢出的效果。同時還設置了white-space: nowrap;和text-overflow: ellipsis;來確保文本只顯示一行，並自動顯示省略號。

四、使用CSS動畫效果

使用CSS動畫效果也可以使得單行文本溢出更加生動，可以通過將一段文本放在一個浮動的div中，然後將其左浮並製造出溢出文本的效果。示例代碼如下：

.container {
    position: relative;
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
}

.overflow-text {
    position: absolute;
    left: -100%;
    top: 0;
    padding-right: 100%;
    animation: marquee 8s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(140%);
    }
    100% {
        transform: translateX(-100%);
    }
}

上面的代碼增加了一個keyframes的動畫效果，由於文本溢出時會慢慢地向左滑動，直到完全漏出來。此外，還增加了padding-right的值，以確保文本盒子的寬度超過容器的寬度。

五、使用CSS網格布局

CSS網格布局也是一個非常不錯的解決方案，可以很方便地控制文本容器和文本的大小，從而實現單行文本溢出的效果。代碼示例如下：

.container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 1rem;
  overflow: hidden;
}

.overflow-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

上面的代碼使用了grid-template-columns屬性來動態設置文本容器和文本的寬度，從而達到單行文本溢出的效果。同時也使用了white-space: nowrap;和text-overflow: ellipsis;來保證文本只顯示一行，並允許自動顯示省略號。