HTML5 \ CSS - 控制线在类似注释的文本区域内的位置

Question

我正在尝试使用 CSS 和 HTML 创建一个类似笔记的 textarea。我几乎成功了，但很难控制自定义线条的高度/将文本对齐到线条上方几个像素处。请指教

HTML:

<div id="textAreaDiv">
    <textarea class="notes" rows="5"></textarea>
</div>

CSS:

#textAreaDiv{
    top: 60px;
    margin: 0 auto;
    width: 800px;
    height: 500px;
    position: relative;
    border: solid 1px blue;
}

.notes {

    padding-bottom: 10px;
    position: relative;
    width: 800px;
    height: 400px;
    background-image: -webkit-linear-gradient(left, white 20px, transparent 20px), -webkit-linear-gradient(right, white 20px, transparent 20px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);

    background-image: linear-gradient(left, white 20px, transparent 20px), linear-gradient(right, white 20px, transparent 20px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 0%, 0% 0%, 10% 50px;
    border: none;
    line-height: 70px;
    font-family: 'Open Sans', sans-serif;
    font-size: 34px;
    resize: none;
    border: solid 1px red;
    letter-spacing: 1px;
}

.notes:focus {
    outline: none;
}

jsfiddle

Answer 1

您应该将 background-position:100% 40%; 添加到您的 'notes' class。现在，当您更改 'notes' class 的 height 时，您可以玩这些线了。现在也更改 line-height 使文本完美地适合行之间。

See updated Fiddle here

注：我只改了.notesclass.

.notes {
  padding-bottom: 10px;
  position: relative;
  width: 800px;
  height: 476px;
  background-position: 100% 40%;
  background-image: -webkit-linear-gradient(left, white 20px, transparent 20px), -webkit-linear-gradient(right, white 20px, transparent 20px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-image: linear-gradient(left, white 20px, transparent 20px), linear-gradient(right, white 20px, transparent 20px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-size: 100% 0%, 0% 0%, 10% 50px;
  border: none;
  line-height: 54px;
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  resize: none;
  border: solid 1px red;
  letter-spacing: 1px;
}

编辑：当您键入很多时，文本会越界。您应该使用 height 和 line-height 来防止这种情况发生。

Answer 2

我找到了一个很好的例子来说明你想要什么。只需将您的样式替换为：

#textAreaDiv{
    top: 60px;
    margin: 0 auto;
    width: 800px;
    height: 500px;
    position: relative;
    border: solid 1px blue;
}

.notes{
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Arial';
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -webkit-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -moz-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -o-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: linear-gradient(transparent, transparent 49px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }

Answer 3

我想这就是你想要的
CSS

#textAreaDiv{
    margin: 0 auto;
    width: 400px;
    height: 210px;
    position: relative;
    background:repeating-linear-gradient( to bottom, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
}
#textAreaDiv:before{
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}
.notes {
    display:block;
    left:0;
    top:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background:transparent;
    border: none;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    resize: none;
    letter-spacing: 1px;
    box-shadow:0 0 1px #999;
    outline:none;
    padding-left:35px;
    padding-bottom:21px
}

HTML 与您的相同，您可以使用此值来更改字体大小等以满足您的需要 fiddle

HTML5 \ CSS - 控制线在类似注释的文本区域内的位置

HTML5 \ CSS - Control lines position inside note-like textarea

html

javascript

css

textarea