左侧有Code | Name | Department
38395334 | John | Doe
113231223 | Mike | Linoff
| Alex | Carter
| Jimmy | Carter
,右侧有div
,两者都填满了整个屏幕。根据我在画布中指向的项目,我会显示有关div(canvas
)的一些信息。问题是,有些文本太长并且隐藏在div的右侧(我不想使用滚动条)。
通常,长文本由斜杠分隔的名称组成,例如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;
}
答案 0 :(得分:2)
您可以使用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>