Question

通常，长文本由斜杠分隔的名称组成，例如element.innerHTML = '...'。如果斜杠将文本分隔为新行，我的问题就会解决，但事实并非如此。一些可能的解决方案是：

1）将'/'替换为'/'，但如果文本适合单行则会变得难看。出于同样的原因，我无法将name1/name2/name3添加到html中。此外，这个文本是要复制的，所以即使添加一些样式来隐藏空间也不是我需要的。

2）用另一个自动分隔线的分隔符替换'/'（连字符是我唯一的朋友吗？它们看起来不适合我的情况）。

3）使用\n，但它会在中间打破这个词，我更喜欢在斜线之后将其打破。

4）自动增加div宽度而不会弄乱画布的位置和大小（overflow-wrap: break-word正在使用body）。我认为那将是最好的解决方案，因为它也可以解决问题不在于斜线的最罕见的情况。

我做了一个jsfiddle来说明，你可以看到一些斜线打破文本，而其他人则没有（并且文本在斜线之前断开，我认为是丑陋的。无论如何，如果我必须接受在斜线之前被破坏的文本，它仍然需要在所有必要的斜线之前中断！）

HTML

flex-direction:row

CSS

<body>
<div id='data'>
  <button onclick='c()'>
  Get Text
  </button><br>
  <br>
  Default text.<br>
  <br>
  <span id='text'></span>
</div>
<canvas id='canv'>
</canvas>
</body>

的JavaScript

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
#data {
    padding:10px;
  background-color: #CCF;
    overflow-y:auto;
    overflow-x:hidden;
}
#canv {
  background-color: #CFC;
}

Answer 1

您可以使用span包装斜杠并应用一些样式使它们接近文本：

var data = document.getElementById('data');
var canv = document.getElementById('canv');
canv.width = window.innerWidth - data.offsetWidth;
canv.height = window.innerHeight;

function c() {
  var text = document.getElementById('text');
  text.innerHTML = 'longname1<span>/</span> longnam<span>/</span> longname3<span>/</span> longname4<span>/</span> lllllllll<span>/</span> lon<span>/</span> aa';
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

#data {
  padding: 10px;
  background-color: #CCF;
  overflow-y: auto;
  overflow-x: hidden;
}

#canv {
  background-color: #CFC;
}

#text span {
  letter-spacing: -4px;
}

<body>
  <div id='data'>
    <button onclick='c()'>
  Get Text
  </button>
  default text 
  <br>
  <br>
    <div id='text'></div>
  </div>
  <canvas id='canv'>
</canvas>
</body>

斜线后如何自动断线？

1 个答案: