主页 / 问题 / 1418475
Accepted
EzioMercer
Asked:2022-08-09 16:32:07 +0800 CST2022-08-09 16:32:07 +0800 CST

环绕文本的边框

  • 772

是否可以在文本周围进行笔划，以便在第一种情况下它是_|- 形的，而在第二种情况下就像一个常规矩形？你不应该拘泥于文本和块的大小和位置，我只是为了清楚起见而把它放出来。明天图片可能会更低，在右边，甚至不存在 - 没关系。一行图片可以有 2 或 3 个块，预计不会更大。一般来说，有必要像文本一样，框架也环绕

.img {
  height: 100px;
  width: 200px;
  background-color: red;
  float: left;
  margin-right: 8px;
}

.text {
  margin-bottom: 8px;
}
<div class="container">
  <div class="img">IMG</div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
</div>

它应该看起来像这样： 在此处输入图像描述

非常希望解决方案是纯 CSS。如有必要，可以自行更改 HTML 结构，主显示并认为图片是与文本分开的块

UPD

在寻找解决方案时，我遇到了这样一个有趣的答案，但不幸的是，由于使用了内联元素，框架根据单词的大小非常扭曲，如果你开始缩小它，那么在某处单词和框架之间存在间隙，分为两部分：

.message {
  margin-bottom: 16px;
}

.wrapped {
   outline: 2px solid black;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

.img {
  height: 100px;
  width: 200px;
  background-color: red;
  float: left;
  margin-right: 8px;
}

.img.right {
  float: right;
  margin-left: 8px;
}
<div>
  <div class="img">IMG</div>
  <div class="message">
    <span class="wrapped">
      <span>This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span
      </span>
    </span>
  </div>
  <div class="img right">IMG</div>
  <div class="message">
    <span class="wrapped">
      <span>This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span This is a potentially large paragraph of text, which may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal box round the span
      </span>
    </span>
  <div>
</div>

javascript css

2 个回答

  1. Best Answer

    我设法破解了一些东西。这个想法是设置文本块之间的缩进不是用边距，而是用一个单独的块来“打破” _| 边界，位于顶部。

    :root {
  --text-pad: 8px;
  --border-size: 2px;
  --border: var(--border-size) solid green;
}

.img-left {
  float: left;

  border-right: var(--border);
  border-bottom: var(--border);
  
  margin-right: var(--text-pad);
  padding: 0 var(--text-pad) var(--text-pad) 0;
  background: white;
}

.img {
  height: 100px;
  width: 200px;
  border: var(--border);
  z-index: 2;
  position: relative;
}

.text {
  padding: 0 var(--text-pad);
  background: white;
  border: var(--border);
}

.container { padding: 10px; }

.offset {
  padding: calc(var(--text-pad) / 2) 0px;
  background: white;
  z-index: 1;
  position: relative;
}
    <div class="container">
  <div class="img-left">
    <div class="img">IMG</div>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet
  </div>
  <div class="offset"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita,
    facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
  <div class="offset"></div>
</div>

    存在两个文本块都小于图像的边界情况。但即使这也可能很棘手......

    UPD
    上面的代码适用于特定情况。考虑到所有的愿望，这种方法的前景是模糊的。

    如前所述，在您的示例中，您可以通过text-align: justify添加来改进结果.message。

    我也想分享一个基于Canvas和JS的解决方案。起初，我并没有认真考虑这个选项，但我设法得到了一个相当有效的解决方案。

    该方法clip()有助于模拟对元素矩形区域的布尔运算。那些。我们使用所有文本块作为剪切区域，在图片块的框架上绘制，然后在没有框架的情况下填充它们以擦除组内的多余线条。

    const canvas    = document.getElementById('outline');
const container = document.querySelector('.container');
const txtBlocks = document.querySelectorAll('.text');
const lImages   = document.querySelectorAll('.img-left');
const rImages   = document.querySelectorAll('.img-right');
const ctx       = canvas.getContext('2d');

let lineSize = 2;

function drawOutline() {
  const rc = container.getBoundingClientRect();

  canvas.width = rc.width;
  canvas.height = rc.height;

  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2 * lineSize;

  for (tb of txtBlocks) {
    ctx.rect(tb.offsetLeft, tb.offsetTop, tb.offsetWidth, tb.offsetHeight);
  }

  ctx.clip();

  drawComponents(rImages, true);
  drawComponents(lImages, true);
  ctx.stroke();

  drawComponents(lImages, false);
  drawComponents(rImages, false);
}

function drawComponents(rects, stroke) {
  let left = rects[0].classList.contains('img-left');

  for (im of rects) {
    let l = left ? 0 : im.offsetLeft;
    let w = left ? im.offsetLeft + im.offsetWidth : canvas.width - l + im.offsetWidth;

    if (stroke)
      ctx.rect(l, im.offsetTop, w, im.offsetHeight);
    else
      ctx.fillRect(l, im.offsetTop, w, im.offsetHeight);
  }
}

drawOutline();
window.addEventListener('resize', drawOutline);
//
    :root {
  --text-pad: 8px;
}

#outline {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.img-left {
  float: left;  
  margin-right: var(--text-pad);
  padding: var(--text-pad);
  padding-left: 0;
}

.img-right {
  float: right; 
  margin-left: var(--text-pad);
  padding:  var(--text-pad);
  padding-right: 0;
}

.img {
  height: 100px;
  width: 100px;
  border: 2px solid blue;
}

.small { height: 50px; width: 50px; }
.medium { height: 80px; width: 80px; }

.img-left+.img-left {
  margin-left: calc(-1 * var(--text-pad));
}
.img-right+.img-right {
  margin-right: calc(-1 * var(--text-pad));
}

.text {
  padding: 0 var(--text-pad);
  margin-top: var(--text-pad);
}

.container {
  padding: 10px;
  position: relative;
  overflow: hidden;
}
    <div class="container">
  <canvas id="outline"></canvas>
  <div class="img-left"><div class="img">IMG</div></div>
  <div class="img-left"><div class="img medium">IMG</div></div>
  <div class="img-left"><div class="img small">IMG</div></div>
  <div class="img-right"><div class="img medium">IMG</div></div>
  <div class="img-right"><div class="img small">IMG</div></div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
  <div class="img-left"><div class="img medium">IMG</div></div>
  <div class="img-right"><div class="img small">IMG</div></div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
</canvas>

    解决方案似乎是通用的。您可以添加任何具有不同定位的图像集。文本块可以分成几个孤立的块。

    剩下两个问题。首先是空块的形成。但我不知道如何理解文本不再存在。二是超窄条纹的形成。幸运的是，有一个简单的解决方案。我们输入公差变量并检查从绘制块的底部边框到文本块的底部边框的距离。如果距离 <= 容差，则绘制到文本块的底部边框，覆盖该条。

    const canvas    = document.getElementById('outline');
const container = document.querySelector('.container');
const txtBlocks = document.querySelectorAll('.text');
const lImages   = document.querySelectorAll('.img-left');
const rImages   = document.querySelectorAll('.img-right');
const ctx       = canvas.getContext('2d');

let lineSize = 2;
let tolerance = 18;
let toleranceLines = [];

function drawOutline() {
  const rc = container.getBoundingClientRect();

  canvas.width = rc.width;
  canvas.height = rc.height;

  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2 * lineSize;
  toleranceLines = [];

  for (tb of txtBlocks) {
    ctx.rect(tb.offsetLeft, tb.offsetTop, tb.offsetWidth, tb.offsetHeight);
    toleranceLines.push(tb.offsetTop + tb.offsetHeight);
  }

  ctx.clip();

  drawComponents(rImages, true);
  drawComponents(lImages, true);
  ctx.stroke();

  drawComponents(lImages, false);
  drawComponents(rImages, false);
}

function drawComponents(rects, stroke) {
  let left = rects[0].classList.contains('img-left');

  for (im of rects) {
    let l = left ? 0 : im.offsetLeft;
    let w = left ? im.offsetLeft + im.offsetWidth : canvas.width - l + im.offsetWidth;
    let h = im.offsetHeight;
    let b = im.offsetTop + h;

    let i = toleranceLines.findIndex((v) => Math.abs(b - v) <= tolerance);
    if (i !== -1) h += toleranceLines[i] - b;

    if (stroke)
      ctx.rect(l, im.offsetTop, w, h);
    else
      ctx.fillRect(l, im.offsetTop, w, h);
  }
}

drawOutline();
window.addEventListener('resize', drawOutline);
    :root {
  --text-pad: 8px;
}

#outline {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.img-left {
  float: left;  
  margin-right: var(--text-pad);
  padding: var(--text-pad);
  padding-left: 0;
}

.img-right {
  float: right; 
  margin-left: var(--text-pad);
  padding:  var(--text-pad);
  padding-right: 0;
}

.img {
  height: 100px;
  width: 100px;
  border: 2px solid blue;
}

.small { height: 50px; width: 50px; }
.medium { height: 80px; width: 80px; }

.img-left+.img-left {
  margin-left: calc(-1 * var(--text-pad));
}
.img-right+.img-right {
  margin-right: calc(-1 * var(--text-pad));
}

.text {
  padding: 0 var(--text-pad);
  margin-top: var(--text-pad);
}

.container {
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
    <div class="container">
  <canvas id="outline"></canvas>
  <div class="img-left"><div class="img">IMG</div></div>
  <div class="img-left"><div class="img medium">IMG</div></div>
  <div class="img-left"><div class="img small">IMG</div></div>
  <div class="img-right"><div class="img medium">IMG</div></div>
  <div class="img-right"><div class="img small">IMG</div></div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
  <div class="img-left"><div class="img medium">IMG</div></div>
  <div class="img-right"><div class="img small">IMG</div></div>
  <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
</canvas>

    很明显，公差不要超过一行文字的高度，否则会有伪影。

    理论上，如果你用多边形操作，而不是在画布上绘图，你可以部分解决第一个问题overflow-wrap: anywhere，或者对文本进行初步分析，从而以一定的概率确定块是空的。但这还没有达到。

    我希望有人会有用。

    • 2

  2. 制作一个多边形框架 - 那仍然是痔疮。但是您可以使用非模糊阴影模拟所需的行为：

    .img {
  height: 100px;
  width: 200px;
  float: left;
  border: 2px solid #000;
  box-shadow: 5px 5px 0 5px #fff, 6px 6px 0 6px #000;
  margin: 0 calc(12px + 0.5em) 12px 0;
}

.text {
  margin-bottom: 8px;
  border: 2px solid;
  padding: 0.5em;
}

.container {
  border: 2px solid;
  padding: 0.5em;
  background-color: #fff;
}
    <div class="container">
  <div class="img">IMG</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita,
    facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus expedita, facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus expedita,
    facilis, hic id ipsa ipsam laboriosam libero mollitia nam odio possimus recusandae sed similique tempore unde veniam vitae voluptatem voluptates.
  </div>
</div>

    • 1

相关问题