html – 在非包装文本区域显示线长度指南

我想在HTML页面中显示一个只读的文本块 – 就像它发生的那样,它将是用户的Git提交消息的等宽文本 – 而当我想显示文本而不包装时,我会喜欢显示一个72个字符的垂直线长度指南,所以当用户的线路超过了 recommended length时,用户很清楚.

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

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

(除此之外,我并不是大力支持文本包装指南,但是我的用户需要注意它们)

解决方法

通过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,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'

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