在非换行文本区域上显示行长指南

Posted 2023-05-07

【中文标题】在非换行文本区域上显示行长指南

【英文标题】：Display a line-length guide on a non-wrapping text area

【发布时间】：2015-07-05 05:09:11

【问题描述】：

我想显示一个只读文本块作为 html 页面的一部分——碰巧，它将是用户 Git 提交消息的等宽文本——而我想显示文本而不换行，我希望显示一个 72 个字符的垂直行长指南，以便用户在他们的行超过 recommended length 时很清楚。

在某些情况下，用户输入的文本行会比视口宽得多。

我可以用 CSS 实现这种效果吗？

（顺便说一句，我不太赞成文本换行指南，但我的用户需要注意它们）

【问题讨论】：

根据未来的字符数量设置长度不是很准确，因为字体大小/样式/宽度/系列以及每个浏览器对它的解释。我认为更好的方法是显示一个小的 javascript 字符计数器来指示用户的限制。

我想我只会允许包含消息的单行元素水平滚动或椭圆化，并带有包含完整消息的工具提示。为什么要限制用户？

【参考方案1】：

通过 CSS 实现这一点并不实际，因为 css 没有为您提供任何类型的第 n 个字符选择器。您只能以固定宽度绘制一条线，这将是您字体字符宽度的最佳猜测。

但是，如果您可以使用少量的 javascript，则可以轻松完成。

这是我为您制作的代码示例，展示了如何：http://codepen.io/beneggett/pen/GJgVrp

所以想让我把代码和codepen一样粘贴在这里，所以这里是：

HTML：

<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
  <code>
    Here is my really awesome code that is nice
    and it is so cool. If you are actually reading this, well I praise you for bearing with me 
    as you can see there is some short code
    and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
    it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
    The nice thing is we can tell our users when the code is short
    or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
    oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
    i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it

    That's it for now
  </code>
</pre>

<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>

CSS：

pre
  white-space: pre;
  background: #ececec;
  border: 1px solid #c3c3c3;
  overflow: auto; 

pre .long
  border-left: 1px dotted red;
  color: red
    

JS（CoffeeScript）：

$(document).ready ->
  lines = $('pre code').text().split('\n')   # First we'll find all the lines of code
  $('pre code').text('')   # then, remove the old code, as we're going to redraw it with syntax highlighting 
  $.each lines, (n, elem) -> # Loop through each line
    if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
      good_code = elem.substring(0,71)
      long_code = elem.substring(71)    
      $('pre code').append "#good_code<span class='long'>#long_code</span>\n"
    else # otherwise we will just keep the original code
     $('pre code').append elem + '\n'

这只是一个简单的插图，使用对我来说很简单的工具；但关键是要说明它是非常简单的代码，可以很容易地适应你想要做的事情。

【讨论】：

谢谢 - 我喜欢这个答案不需要尝试渲染大小的字体，并且还提供了一个具体的示例实现，很高兴奖励你的答案！

【参考方案2】：

使用像 courier new 这样的等宽字体，计算出 72 个字符的宽度，然后在文本下方放置一个具有该宽度并带有虚线右边框的 div。

【参考方案3】：

正如 Ben Eggett 所说，使用等宽字体是因为

“等宽字体，也称为固定间距、固定宽度或非比例字体，是一种字母和字符各自占据相同水平空间的字体。”

即使是“l”和“m”也占据相同的空间。因此，请根据您使用的字体大小和容器所在位置的垂直线找出每个字符占用的宽度。

对于其他字体，每个字符的宽度是不同的，因为 CSS 是静态的，所以不能只使用 css。

下面的 jsfiddle 链接提供了使用等宽字体“Courier New”的实现示例

http://jsfiddle.net/mnLzyy2x/

<div class="git-msgs-container">
    <p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
    <div class="separator"></div>
</div>

CSS是

.git-msgs-container 
    width: 900px;
    border: 1px solid red;
    font-family: 'Courier New';
    font-size: 15px;
    position: relative;


p 
    margin: 0;
    padding: 0;


.separator 
    height: 100%;
    border-left: 1px solid blue;
    position: absolute;
    top: 0;
    left: 648px;

【参考方案4】：

增强 Kalyan Kumar S 的配方。

这里是小提琴：http://jsfiddle.net/4mu5Lwex/

HTML：

<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>

It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.

CSS：

.git-msgs-container 
    width: 900px;
    border: 1px solid red;
    font-family: 'Courier New';
    font-size: 10pt;
    position: relative;


.git-msgs-container p::after 
    display:block;
    position: absolute;
    left: 432pt;
    top: 0;
    margin-top: 0;
    height: 100%;
    border-left: 1px solid blue;
    content: '';

【参考方案5】：

其中许多建议在大多数情况下都会奏效。但是，如果用户将其默认字体大小设置为与您预期不同的值，则绝对像素的定位将会中断。

使用em 或rem 等可缩放单位来设置字体大小。然后计算单个字符宽度有多少个ems 或rems，并将垂直线标记定位在字符宽度的 72 x 处。

示例：

div#container 
  position: relative;
  font-size: 1rem;

如果您没有更改默认字体大小，1rem 将等于 16px。 （如果有，请在继续之前在浏览器中将字体大小重置为默认值）现在测量单个字符或一行字符并将其平均。 （截屏并拉入 Photoshop 或 Gimp 中）将单个字符宽度除以 16，您将得到 rem 中的字符宽度。

例如：

character width = 9px;
9 / 16 = 0.5625rem;

乘以 72 得出定位：

72 characters = 0.5625 * 72 = 40.5rem

现在定位你的垂直线：

div#container .verticalLine 
  position: absolute;
  top: 0rem;
  left: 40.5rem;

这会根据字体大小而不是像素来设置定位。所以它会随着字体大小相应地缩放。

如果您想要大字体（比如 1.5rem），请将计算出的 72 个字符乘以所需的字体大小。

40.5rem * 1.5 = 60.75rem

n.b.如果您不想精确测量，或者您没有图形程序，那么您可以通过反复试验调整定位，直到定位到正确的位置。

【参考方案6】：

你肯定想要一个等宽字体。您可以使用以下 CSS 包含类似 Paul Hunt's Source Code Pro (Google Fonts) 的内容：

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

然后，在 div 中构造您的提交消息，如下所示。 （注意空指南 div）：

<div class="commit-message">
  Commit message goes here.
  <div class="guide">&nbsp;</div>
</div>

..并应用此 CSS：

.commit-message 
  font-family:"Source Code Pro", sans-serif;
  font-size: 12px;
  position: relative;

.commit-message .guide 
  position: absolute;
  top: 0;
  height:100%;
  width: 43em;
  border-right: 2px dashed red;

根据您在第一条规则中应用的font-size，您可能需要调整第二条规则中的width。

这是一个展示它的小提琴：http://jsfiddle.net/yjjybtLu/4/

【参考方案7】：

“红线”的预先计算距离对我来说似乎并不可靠。 使用与 textarea 中使用的字体完全相同的 50 个字符的背景可能会起到作用。 该建议仍然依赖于背景的固定高度，如果 textarea 的高度需要灵活，这并不好。

<style type="text/css">
    * 
        font-family: monospace;
    
    .textarea-wrapper 
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
        background-color: #fff; 
    
    textarea 
        position: absolute;
        width: 600px;
        height: 400px;
        background-color: transparent;
        border-width: 2px;
    
    span 
        position: absolute;
        top: 2px;
        left: 2px;
        display: block;
        width: auto;
        height: 100%;
        border-right: 2px dotted #fcc;
        color: #fff;
    
</style>

<div class="textarea-wrapper">      
    <span>01234567890123456789012345678901234567890123456789</span>
    <textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
    </textarea>
</div>