使一個css對象移動友好

Question

我已經爲虛線邊框的矩形框做了一個css腳本。這裏是CSS：

.stitched { 
    padding: 20px; 
    margin: 10px; 
    background: #ff0030; 
    color: #fff; 
    font-size: 21px; 
    font-weight: bold; 
    line-height: 1.3em; 
    border: 2px dashed #fff; 
    border-radius: 10px; 
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); 
    text-shadow: -1px -1px #aa3030; 
    font-weight: normal; 
} 

HTML：

<div class="stitched"> 

    content.................................................... 

</div> 

但在移動版本，因爲盒子的高度保持相同的和寬度減小，以適應移動屏幕上的內容彼此重疊。 任何幫助？謝謝！

Answer 1

我已經添加了一些虛擬文本來測試代碼。

據我所知，你的內容是較早溢出，要解決這個我添加

word-wrap:break-word; 

，以確保內容不越過邊界。

.stitched { 
 
    padding: 20px; 
 
    word-wrap:break-word; 
 
    margin: 10px; 
 
    background: #ff0030; 
 
    color: #fff; 
 
    font-size: 21px; 
 
    font-weight: bold; 
 
    line-height: 1.3em; 
 
    border: 2px dashed #fff; 
 
    border-radius: 10px; 
 
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); 
 
    text-shadow: -1px -1px #aa3030; 
 
    font-weight: normal; 
 
}

<div class="stitched"> 
 

 
    content 
 
    <br> 
 
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam 
 

 
</div>

這裏是一個DEMO

另外，作爲@Sam滕倭嗯建議，您還可以使用媒體查詢這個樣子。隨意根據您的要求更改任何內容。

@media(max-width:500px){ 
    .stitched { 
    padding: 10px; 
    word-wrap:break-word; 
    margin: 5px; 
    background: #ff0030; 
    color: #fff; 
    font-size: 15px; 
    font-weight: bold; 
    line-height: 1em; 
    border: 1px dashed #fff; 
    border-radius: 5px; 
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); 
    text-shadow: -1px -1px #aa3030; 
    font-weight: normal; 
} 
} 

這裏是一個DEMO for the code with Media Queries