我有一个div在左边和一个canvas在右边，都充满了整个屏幕。根据我在画布中指向的项目，我将显示有关div（element.innerHTML = '...'）的一些信息。问题是，有些文本太长，隐藏在div的右侧（我不想使用滚动条）。
通常，长文本由斜线分隔的名称组成，如name1/name2/name3。如果斜线将文本分隔成一行，我的问题就解决了，但事实并非如此。一些可能的解决方法是：
1）将“/”替换为“/”，但如果文本适合一行，则会变得很难看。出于同样的原因，我不能将\n添加到html中。另外，这段文字是要复制的，所以即使添加一些样式来隐藏空间也不是我所需要的。
2）用另一个自动换行的分隔符替换“/”（连字符是我唯一的朋友吗？它们看起来不适合我的情况）。
3）使用overflow-wrap: break-word，但它会在中间打断单词，我更喜欢在斜杠后面打断它。
4）自动增加div宽度，而不影响画布的位置和大小（body正在使用flex-direction:row）。我认为这将是最好的解决方案，因为它还将解决最罕见的情况，其中的问题不是斜杠。
我做了一个jsfiddle来说明，你可以看到一些斜线会打断文本，而另一些则不会（而且文本会在斜线之前打断，我认为这很难看）。不管怎样，如果我必须接受在斜线之前被打断的文本，它仍然需要在所有必要的斜线之前被打断！）
HTML格式
<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>
CSS
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;
}
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;
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>