在網頁設計中，很常見的場景是需要將一個元素的寬度設置為100%，以使其占據整個屏幕寬度。然而，當元素的內容過長時，它可能會超出屏幕的寬度，造成水平滾動條的出現，影響用戶體驗。

那么，如何解決這個問題呢？

一種解決方法是使用CSS3中的box-sizing屬性，并將其設置為border-box。box-sizing屬性用來設置元素的盒模型，它有三個值：content-box、padding-box和border-box。其中，設置為border-box時，元素的寬度包括邊框和內邊距。這樣，即使內容過長，元素也不會因為邊框和內邊距的增加而超出屏幕寬度。

.box{
box-sizing: border-box;
width: 100%;
padding: 20px;
border: 1px solid #000;
overflow: hidden;
}

另一種解決方法是使用CSS3中的calc()函數，計算元素的寬度。calc()函數可以進行數學計算，其支持加、減、乘、除四種運算，可以為元素設置準確的寬度。例如，下面的代碼可以計算出元素的準確寬度，并將其設置為100%減去20像素的值。

.box{
width: calc(100% - 20px);
}

這兩種方法都可以解決元素超出屏幕寬度的問題，但應用場景不同。如果需要設置元素的邊框和內邊距，建議使用box-sizing屬性；如果需要計算元素的準確寬度，建議使用calc()函數。