君不見黃河之水天上來，奔流到海不復回，君不見高堂明鏡悲白髮，朝如青絲暮成雪，人生得意須盡歡，莫使金樽空對月
下面解釋原因：
首先 這裡的.box被設定了寬度為300px,而由於是塊級元素，所以預設寬度是100%，在這裡也就是300px，但是的文字寬度其實是超過300px的，題主設定transform: translatex(-100%);的本意是想讓最終能夠偏移整個文段的長度，但是很遺憾，因為p是塊級元素，所以transform: translatex(-100%);在這裡的作用等同於transform: translatex(-300px);所以如果你的文字不是恰好300px，最終滾動停止的位置就不會是剛好在文段末尾。
新增完display: inline-block屬性之後，的寬度就是文段的寬度，自然就不會有上述的問題。
css實現超出部分顯示省略號，控制文字
css實現超出部分顯示省略號，控制文字css實現超出部分顯示省略號，控制文字 顯示一行，省略號 content 顯示兩行，省略號 content webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性 display w...
CSS文字超出部分顯示省略號
overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 white space nowrap 不換行 overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 display web...
CSS控制文字，超出部分顯示省略號
pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。...