Question

如何仅对可能跨越多行的任何长度的文本实现外部边界，必须具有响应性。

寻找类似于下图的样式。

这是我迄今为止所尝试过的，在屏幕尺寸和使用各种字体大小方面努力应对顶级边框和响应能力，我所能得到的最好，但可能会出现这样的错误：

http://www.cssdesk.com/7nxBa

将文字缩小显示右边框重叠，使文字LARGER显示顶部边框...

Answer 1

我找到了＆＃39;大纲＆＃39; css属性似乎完全符合我的需要。

＆＃13;

.container {
  font: 3rem sans-serif;
  font-weight: bold;
  text-transform: uppercase;

}
  
.highlight {
  display: inline;
  background: #fff;
  color: #000; 
  padding: 5px 10px;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
    outline: 0.4rem solid #000;
}

html,body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}

＆＃13;

<body>
  <div class="container">
    <p class="highlight">
      I think I cracked<br>
      it<br>
      using the 'outline' css property, seems to do the trick
      ;-)
    </p>
  </div>
</body>

＆＃13;

OUTSIDE边框仅限于跨越多行的文本

1 个答案: