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

I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.

我想显示一个只读的文本块作为HTML页面的一部分 - 实际上，它将是用户的Git提交消息的等宽文本 - 虽然我想显示没有包装的文本，我会喜欢显示72个字符的垂直线长指南，因此当用户的线条超过推荐长度时，用户会清楚。

In some cases, the user will have entered lines of text much wider than the viewport.

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

Can I achieve this kind of effect with CSS?

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

(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)

（顺便说一句，我并没有大力支持文本包装指南，但我的用户需要了解它们）

7 个解决方案

#1

It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.

通过CSS来实现它并不是那么实际，因为css不会给你任何类型的第n个字符选择器。您只能以固定宽度绘制一条线，这是对字体字符宽度的最佳猜测。

However, if you're ok using a small amount of javascript, it could easily be done.

但是，如果你可以使用少量的javascript，那么很容易就可以完成。

Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp

以下是我为您制作的代码示例：http：//codepen.io/beneggett/pen/GJgVrp

SO wants me to paste the code here as well as codepen, so here it is:

所以我希望我在这里粘贴代码以及codepen，所以这里是：

HTML:

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:

CSS：

pre{
  white-space: pre;
  background: #ececec;
  border: 1px solid #c3c3c3;
  overflow: auto; 
}
pre .long{
  border-left: 1px dotted red;
  color: red
}    

JS (CoffeeScript):

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'

This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.

这只是一个简单的例子，使用对我来说简单的工具;但重点是要说明它非常简单的代码，可以很容易地适应你想要做的事情。

#2

Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.

使用像courier new这样的等宽字体，弄清楚72个字符的宽度是多少，并在文本下方放置一个div，宽度为右边边框。

#3

As said by Ben Eggett use Monospaced fonts because

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

"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."

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

Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.

即使'l'和'm'占据同一个空间。因此，根据您使用的字体大小以及容器该位置的垂直线，找出每个字符占用的宽度。

For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.

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

Below jsfiddle link provides example of implementation using monospaced font "Courier New"

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

http://jsfiddle.net/mnLzyy2x/

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 is

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

Enhancing Kalyan Kumar S's recipe.

增强Kalyan Kumar S的配方。

Here is fiddle: http://jsfiddle.net/4mu5Lwex/

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

HTML:

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:

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

Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.

其中许多建议大部分时间都有效。但是，如果用户将其默认字体大小设置为您预期的以外的其他值，那么在绝对像素处的定位将会中断。

Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.

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

example:

例：

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

if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.

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

eg:

例如：

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

multiply by 72 to figure out positing:

乘以72得出假设：

72 characters = 0.5625 * 72 = 40.5rem

now position your vertical line:

现在定位您的垂直线：

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

This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.

这会根据字体大小而不是像素来设置定位。因此它将相应地缩放字体大小。

If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.

如果需要大字体（例如1.5rem），则将计算出的72字符乘以所需的字体大小。

40.5rem * 1.5 = 60.75rem

n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.

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

#6

You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:

你肯定想要一个等宽字体。您可以使用以下CSS包括Paul Hunt的源代码专业版（Google字体）之一：

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

Then, structure your commit message in a div like the one below. (Note the empty guide div):

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

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

..and apply this CSS:

..并应用此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;
}

Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.

根据您在第一个规则中应用的字体大小，您可能需要在第二个规则中调整宽度。

Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/

这是一个显示它在行动的小提琴：http：//jsfiddle.net/yjjybtLu/4/

#7

A pre-calculated distance for the "red line" doesn't seem reliable to me. A background with 50 characters in exactly the same font as used in the textarea might do the trick. This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.

“红线”的预先计算的距离对我来说似乎不可靠。与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>