Question

在我正在开发的网络应用中，用户可以上传照片（带字幕）并相互分享。

我像宝丽来一样显示每张照片，使用CSS创建效果。例如：

设计能够响应不同的屏幕尺寸（这是一项要求）：

这是CSS代码：

.canvas{
    background-color:white;
    padding:10px 10px 30px 10px;
    display:inline-block;
    border-radius:6px;
}

.image{
max-width:400px;
width:100%;
border-radius:12px;
}

.caption-canvas{
max-width:400px;
text-align:center;
margin-bottom:-10px;
margin-top:1em;
}

.caption{
font-size:130%;
color:grey;
}

<div class="canvas">
    <img src="umb.png" class="image">
    <div class="caption-canvas">
        <span class="caption">This is an orange umbrella</span>
    </div>
</div>

到目前为止一切顺利。

但是如果标题是一个没有中断的长字符串会出现问题。 E.g：

但不用担心，可以添加overflow-wrap: break-word;（至.caption）来处理此问题：

但是这会产生一个新问题：宝丽来帆布不会随着分辨率的降低而缩小，并且会溢出容器。即：

如果我使用word-break: break-all;，我可以修复此响应问题。但是我不想用它。它对英文文本表现不佳，所以它出来了：

但是，这正是我需要的那种响应能力。有人可以帮我找到一个包含overflow-wrap: break-word;的解决方法并且完全响应吗？或者那是不可能的？

理想情况下，我不想过多地改变我的CSS - 它在大多数情况下都按预期工作，并且它不使用CSS3（我需要避免使用CSS3来支持旧设备 - 我的另一个要求）。根据caniuse.com，我更喜欢支持良好的CSS属性。

更新：将width:100%和max-width:400px;添加到.canvas几乎可以解决问题，除非宝丽来画布开始溢出包含div ，即使它使用res 会变得更小。看哪：

背景中的蓝色条纹是包含div（并且它比那个大，但在图像中被裁剪）。

Answer 1

♦在你的（.canvas）中添加：

-webkit-box-sizing : border-box;
   -moz-box-sizing : border-box;
        box-sizing : border-box;

✘，如果你删除，你的html会更好：

<div class="card" style="margin-top:1.3em;background-color:#BDEBFE;text-align:right;">

✔并将其替换为 iD ：

<div id="card">

然后在你的css中使用：

#card {
   margin-top:1.3em;
   padding:6px;
   background-color:#BDEBFE;
   text-align:right;
   max-width:400px;
   }

.canvas{     
-webkit-box-sizing : border-box;
   -moz-box-sizing : border-box;
        box-sizing : border-box;

  background-color:white;
  padding:10px 10px 30px 10px;
  display:inline-block;
  border-radius:6px;
  max-width:400px;
  width:100%;
}

示例：Click here

注意：为什么我们在第一个容器中使用ID而不是类？

在您的特定设置中，因为您在另一个内部使用2个容器，并且都使用＆＃39; class＆＃39;，以某种方式似乎不允许第一个容器显示背景，即使使用padding，这就是为什么我们在第一个容器中使用ID，这就是为什么我告诉您之前在.canvas更好地使用 border ，然后乘坐card div容器。但如果你想要2个容器，那么你最常使用的是ID。

Answer 2

如果我理解正确，你正在寻找一种方法来显示长词而不会破坏它们。在某些时候，将没有更多的空间，所以唯一的另一种显示长字而不打破它们的方法是在较小的屏幕上使用较小的字体。你可以做的是使用hyphens来允许连字符。只需将hyphens: auto添加到.caption

即可

有关连字符的更多信息：https://css-tricks.com/almanac/properties/h/hyphenate/

关于那个容器溢出：我在你的word-break: break-word课程中添加了.caption，这使得宝丽来缩小了规模，但打破了长词 - 比我猜的所有单词更好的长词;）看到所有内容codepen。

https://codepen.io/anon/pen/aEvzwM

Answer 3

您可以在小屏幕上使用媒体查询等内容：

text-align: justify;
overflow-wrap: break-word;

我没有看到你的HTML但只有.caption的溢出包装不应该影响图像大小调整，如果图像在不同的div ...好吧我看到了......

只需添加这两条规则，不是.canvas，而是.caption-canvas或.caption-canvas .canvas{ }

聚苯乙烯。你有两个.canvas类，一个用于容器，一个用于它。

在其标题中使用overflow-wrap属性时，图像响应性会中断

3 个答案: