Отображение руководства длины строки в текстовой области без обертывания

Ответ 1

Это не очень практично делать это с помощью CSS, поскольку css не дает вам никакого типа селектора nth-character. Вы могли бы нарисовать линию с фиксированной шириной, которая была бы наилучшим образом угадана по ширине вашего шрифта.

Однако, если вы используете небольшое количество javascript, это можно легко сделать.

Вот пример кода, который я сделал для вас, показывая, как: http://codepen.io/beneggett/pen/GJgVrp

SO хочет, чтобы я вставлял код здесь, а также 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 just some gibberish text. but that 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 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 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 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

Используйте моноширинный шрифт, такой как курьер новый, выясните, как широкие 72 персонажа и лежат div под текстом с этой шириной и пунктирной правой границей.

Ответ 3

Как сказал Бен Эггетт, используйте моноширинные шрифты, потому что

"Моноширинный шрифт, также называемый шрифтом с фиксированным шагом, фиксированной шириной или непропорциональным шрифтом, является шрифтом, буквы и символы которого занимают одинаковое количество горизонтального пространства."

Даже "l" и "m" занимают одно и то же пространство. Итак, узнайте, сколько ширины каждая char занимает на основе используемого вами размера шрифта и вертикальной линии в этом месте контейнера.

Для других шрифтов ширины для каждого символа различны, и поскольку 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

Усовершенствование рецепта Каляна Кумара.

Вот скрипка: 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. (Если у вас есть, reset размер шрифта по умолчанию в вашем браузере перед продолжением) Теперь измерьте одиночный символ или строку символов и сравните его. (сделайте снимок экрана и потяните его в 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

Вы определенно хотите моноширинный шрифт. Вы можете включить один из них: Paul Hunt Source Code Pro (Google Fonts) со следующим CSS:

@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

Предварительно рассчитанное расстояние для "красной линии" не кажется мне надежным. Фокус с 50 символами точно таким же шрифтом, как и в текстовом поле, может сделать трюк. Это предположение по-прежнему зависит от фиксированной высоты фона, что не очень хорошо, если высота текстового поля должна быть гибкой.

<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>