Javascript 斜杠后如何自动换行？

我在左边有一个

div

，在右边有一个

canvas

，两者都占据了整个屏幕。根据我在画布中指向的项目，我将显示有关div的一些信息（

element.innerHTML='…'

）。问题是，有些文本太长，隐藏在div的右侧（我不想使用滚动条）

通常长文本由斜杠分隔的名称组成，如

name1/name2/name3

。如果斜杠将文本分隔成一行，我的问题将得到解决，但事实并非如此。一些可能的解决办法是：

1） 将“/”替换为“/”，但如果文本放在一行中，则会变得难看。出于同样的原因，我无法将

\n

添加到html中。此外，此文本是要复制的，因此即使添加一些样式来隐藏空间也不是我所需要的

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

3）使用<代码>溢出包：中断词，但它会在中间打破单词，我希望它在斜杠之后被打破。

4） 自动增加div宽度，而不影响画布的位置和大小（

body

正在使用

flex direction:row

）。我认为这将是最好的解决方案，因为它还将解决最罕见的情况，即问题不在于斜杠

我做了一个例子来说明，你可以看到一些斜杠打断了文本，而另一些则没有（而且文本在斜杠之前打断，我认为这很难看。无论如何，如果我必须接受在斜杠之前打断的文本，它仍然需要在所有必要的斜杠之前打断！）

HTML

JavaScript

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/longname2/longname3/longname4';
}

---

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

var data=document.getElementById（'data'）；
var canv=document.getElementById（'canv'）；
canv.width=window.innerWidth-data.offsetWidth；
canv.height=window.innerHeight；
函数c（）{
var text=document.getElementById（'text'）；
text.innerHTML='longname1/longnam/longname3/longname4/lll/lon/aa'；
}

html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
溢出：隐藏；
}
#资料{
填充：10px；
背景色：#CCF；
溢出y：自动；
溢出x：隐藏；
}
#坎夫{
背景色：#CFC；
}
#文本跨度{
字母间距：-4px；
}

获取文本
默认文本

您可以将正在运行的代码直接包含在问题中，而不是留下链接。请这样做。我没有投票赞成关闭，也没有投票反对。无论是谁投票赞成关闭，为什么这个问题不是关于编程的？这是一个解决办法，但是斜杠后面的空格被复制并粘贴到其他地方。这些数据是用来复制的。第四种解决方案是最好的，我将编辑问题来解释这一点。很抱歉之前没有解释。@Rodrigo是的，但是（4）解决方案意味着大量的计算，如果文本将是动态的，那么我不应该像我一样讨厌CSS。再仔细想想，我只记得有一个

minwidth

属性。它最终解决了我的问题。

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;
}

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/longname2/longname3/longname4';
}