防止div溢出的優雅方法

Question

我有以下代碼：

 .wrapper { border-top: 2px solid #C0C0C0; border-bottom: 2px solid #C0C0C0; white-space: nowrap; text-align: left; width: 100%; height: 9vh; display: flex; } .leftDiv { height: 9vh; margin-left: 1vw; position: relative; width: 100%; } .top { margin-top: 2vh; font-size: 2.6vh; top: 0; position: absolute; } .bottom { font-size: 1.9vh; bottom: 0; position: absolute; } .rightDiv { background-color: red; width: 20%; height: 9vh; float: right; border-left: 2px silver solid; } 

 <div class="wrapper"> <div class="leftDiv"> <p class="top"><b>this cannot overflow right div txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt</b></p> <p class="bottom">txt</p> </div> <div class="rightDiv"></div> </div> 

Jsfiddle： https ：//jsfiddle.net/a4zuv1n5/

這是我想做的事情：

當leftDiv文本（頂級類）在rightDiv div上溢出時，在此之前，我希望顯示一些點並替換“ txt”溢出。 這些點應該可以通過javascript進行操作，稍后我想在javascript中為其附加一個事件。 我該如何實現？ 可能嗎？ 此處可能需要javascript。 提前致謝。

Answer 1

看一下text-overflow: ellipsis 。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow

編輯：更新答案。

好，讓我們從頭開始。 您的CSS遍地都是。 我將其簡化為Codepen的基礎知識https://codepen.io/anon/pen/BZpKOx

html

<div class="wrapper">
    <div class="leftDiv"> 
        <p class="top">
          this cannot overflow right div  txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt this cannot overflow right div  txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt this cannot overflow right div  txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt
      </p>
      <p class="bottom">txt</p>
    </div>
    <div class="rightDiv">
      Stuff in the right
    </div>
</div>

的CSS

.wrapper {
  outline: 1px solid #000;
  display: flex;
}
.leftDiv {
  flex-grow: 1;
  overflow: hidden;
}
.leftDiv .top {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rightDiv {
  outline: 1px solid #cc0000;
  width: 20%;
}

要獲得您提到的可點擊效果，這就像創建一個絕對位置正確的元素（div或錨點），其right：0並垂直放置以覆蓋省略號一樣簡單。

Answer 2

應用overflow:hidden; 和text-overflow: ellipsis; 到<p class="top">元素。

這是因為您要溢出的文本不是 <div class="leftDiv">的直接子<p class="top"> ，而是它是 <p class="top">元素的直接子<p class="top"> 。

在此JSFiddle中查看此內容： https ://jsfiddle.net/a4zuv1n5/3/