Question

如果我将文本粘贴到图像中，那么在此示例中看起来很好。但是，如果我减少浏览器宽度，那么文本就会从图片中滑落。

此外，还会添加难看的换行符。

如何防止这两件事？

应该有一个没有滚动条的解决方案。

以下是一个示例：https://jsfiddle.net/1228sbg7/3/

＆＃13;

.image { 
   position: relative; 
   width: 33%;
   height: auto;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

＆＃13;

<div class="image">

      <img src="https://www1.xup.in/exec/ximg.php?fid=21049048" alt="" />
      
      <h2><span>Lorem ipsum dolor sit amet:<span class='spacer'></span><br /><span class='spacer'></span>consetetur sadipscing elitr</span></h2>

</div>

＆＃13;

Answer 1

尝试将 overflow：hidden; 放在＆lt;的CSS定义中h2＆gt;元件。

h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

另外，使用以下内容替换.image CSS类定义：

.image {
    position: relative;
    height: auto;
    overflow-x:hidden;
}

根据您的评论进行其他编辑：看起来您真的想要在文本的黑暗区域周围填充。我进一步更改了您的HTML，将<h2>标记包裹在div周围。我们不是在<h2>标记中应用较暗的背景，而是在<div>包裹<h2>元素的地方应用样式。

然后，使用min-width设置包装器的最小宽度，以确保文本不会超出图像的高度。

＆＃13;

body {
padding:0px;
margin:0px;

}

.image {
    position: absolute;
    width: 33%;
    height: auto;
}


.darkerDiv {
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    position: absolute;
    top: 200px;
    left: 0;
    text-align:left;
    min-width:170px !important;
    overflow:hidden;
}
.darkerDiv h2 {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.darkerDiv h2 span {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
}

.darkerDiv h2 span.spacer {
    padding: 0 5px;
}

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>    
    <link rel="stylesheet" href="StyleSheet2.css" />
</head>

<body>
    <div class="image">
        <img src="https://images.pexels.com/photos/301599/pexels-photo-301599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=250&w=400" alt="" />
        <div class="darkerDiv">    
             <h2><span>Lorem ipsum dolor sit amet: <br />
             consetetur sadipscing elitr</span></h2>
        </div>
    </div>
</body>

</html>

＆＃13;

减小浏览器宽度时，文本在图像之外

1 个答案: