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

问题描述 投票:1回答:3

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

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

enter image description here

设计响应不同的屏幕尺寸(这是一项要求):

enter image description here

这是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>

到现在为止还挺好。

但是如果标题是一个没有中断的长字符串就会出现问题。例如。:

enter image description here

但是不用担心,可以添加overflow-wrap: break-word;(到.caption)来处理这个问题:

enter image description here

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

enter image description here

如果我改用word-break: break-all;,我可以解决这个响应问题。但是我不想用它。它对英文文本表现不佳,所以它出来了:

enter image description here

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

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


更新:将width:100%max-width:400px;添加到.canvas几乎解决了这个问题,除了宝丽来画布开始溢出包含div,即使它确实变小了res。看吧:

enter image description here

背景中的蓝色条带是包含div(并且它比那个大,但在图像中裁剪)。

html css
3个回答
2
投票

♦在你的(.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


Browsers support for box-sizing

注意:为什么我们在第一个容器中使用ID而不是类? 在您的特定设置中,因为您在另一个内部使用2个容器并且都使用“类”, 不知怎的,它似乎不允许第一个容器显示背景,即使使用padding,这就是为什么我们在第一个容器中使用ID,而这就是为什么我之前告诉你在.canvas更好地使用边框并获得该card div容器 。但如果你想要2个容器,那么你最常使用ID。


0
投票

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

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

关于那个容器溢出:我将word-break: break-word添加到你的.caption类中,这使得宝丽来缩小了但是打破了长词 - 比我想的所有单词更好的长词;)查看codepen中的所有内容。

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


0
投票

您可以在小屏幕上使用媒体查询等等:

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

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

只是添加这两个规则不是为.canvas而是为.caption-canvas甚至为.caption-canvas .canvas{ }

PS。你有两个.canvas类,一个用于容器,一个用于它。

© www.soinside.com 2019 - 2024. All rights reserved.