使一个css对象移动友好

我已经为虚线边框的矩形框做了一个css脚本。这里是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>

但在移动版本，因为盒子的高度保持相同的和宽度减小，以适应移动屏幕上的内容彼此重叠。任何帮助？谢谢！

来源

2016-03-01 Sohail Ahmed

你试过'@ media'？ –

这是否工作[链接]（https://jsfiddle.net/kstvm07y/2/） –

只是使用'断字：断字';' – Pedram

我已经添加了一些虚拟文本来测试代码。

据我所知，你的内容是较早溢出，要解决这个我添加

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

来源

2016-03-01 06:55:18

替代工作很好！正是我想要的：D非常感谢！ –

使一个css对象移动友好

回答

相关问题