a

Câu hỏi Tạo CSS giả: trước cùng chiều cao với phần tử chính


Tôi đã tìm kiếm khắp nơi và không tìm được giải pháp cho riêng mình. Tôi đang cố gắng tạo một trình soạn thảo mã có thể chỉnh sửa nội dung cơ bản và đối với các số dòng tôi đã chọn để sử dụng một đoạn cho mỗi dòng có bộ đếm trong phần tử CSS giả. Đây là fiddle: http://jsfiddle.net/zppb29jw/

Vấn đề là nếu đoạn văn dài hơn một chút thì phần còn lại của văn bản sẽ xuất hiện bên dưới phần giả truy cập của tôi. Tôi muốn strech: trước khi truy cập được chiều cao tương tự như đoạn.

Tôi đã thử sử dụng position:relative trên đoạn văn và position:absolute; height:100% trên p: trước pseudoelement như được giải thích ở đây: Làm thế nào yếu tố giả có thể phát hiện chiều cao của phần tử không giả?

Điều này không có tác dụng trong trường hợp của tôi bởi vì tôi không muốn phần tử p: trước đi qua và bao gồm đoạn văn, tôi chỉ muốn hành vi giống như bây giờ, chỉ muốn p:before yếu tố để strech ở cùng một chiều cao như chính p.

Tôi cũng sẽ không muốn có dòng strech nhiều hơn chiều rộng của container wrapper. Tôi đã thử nhiều phương pháp nhưng không thành công với giải pháp.


7
2017-10-19 10:30


gốc


Bạn sẽ hiển thị cho bạn mã HTML và CSS, khi cần thiết để tái tạo sự cố, trong câu hỏi. - Jukka K. Korpela
Tôi đã đăng một câu chuyện ... jsfiddle.net/zppb29jw Hãy nghĩ nó dễ dàng hơn theo cách này - just some guy
Một câu đố là không phải một sự thay thế cho mã, chỉ là một sự tiện lợi. Một câu hỏi nên hoàn toàn dễ hiểu mà không theo bất kỳ liên kết nào (có thể bị hỏng một ngày nào đó). - Jukka K. Korpela


Các câu trả lời:


thay vì height sử dụng position:relative cho p và absolute cho trước

Js Fiddle

các thuộc tính mới được thêm vào trong css

.editor p {
    position:relative;
    padding-left:3.5em;
}

.editor p:before {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
 }

Chỉnh sửa

Nó phải là một câu hỏi thứ hai: D

nhấn enter trong Ie không tạo br trong khi trong các trình duyệt hiện đại, nó tạo ra br sử dụng :after khắc phục sự cố để p thẻ không được để trống

Js Fiddle

.editor {
  display: inline-block;
  border: 1px black solid;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  counter-reset: line;
  width: 90%;
  height: 350px;
  overflow: scroll;
  padding-left: 0;
  margin-left: 0;
  z-index: 1;
}
.editor p {
  display: block;
  counter-increment: line;
  background-color: #FFF;
  text-align: left;
  margin: 0px;
  z-index: 2;
  outline: none;
  position: relative;
  padding-left: 3.5em;
}
.editor p:before {
  display: inline-block;
  width: 2em;
  height: 100%;
  border-right: 1px black solid;
  padding-right: 1em;
  margin-right: 1em;
  content: counter(line);
  color: #FFF;
  background-color: #006;
  text-align: right;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /*-webkit-user-select: none;
    user-select: none;*/
}
.editor p:after {
  content: " "
}
<div class="editor" contenteditable="true" spellcheck="false">
  <p>Some paragraph</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
    In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
  <p>one</p>
  <p>two</p>
  <p>three</p>
</div>


16
2017-10-19 10:39



wow, như thế này: jsfiddle.net/zppb29jw/3 Có vẻ như không có vấn đề gì cả. Tôi đã cố gắng một cái gì đó simmilar, nhưng đã được sử dụng chiều cao thay vì te trên, dưới và trái định vị. Cảm ơn! - just some guy
chào đón của bạn :) chấp nhận câu trả lời của tôi :) - Vitorino fernandes
như mọi khi IE làm hỏng mọi thứ, hoạt động tốt trong Chrome và trong firefox, nhưng khi bạn chèn một dòng trống trong IE nó sẽ biến mất. Tôi biết có thể làm cho một chức năng javascript để thêm một nút văn bản khi nhập được nhấn nhưng đó cũng sẽ mở một hộp của pandora. Đang cố tránh điều đó ... - just some guy
cố định bằng cách thêm :after đã chỉnh sửa câu trả lời của tôi - Vitorino fernandes
rất đẹp! mà thực sự cũng giải quyết một vấn đề khác của tôi bởi vì trước khi bạn nhấn enter và để lại đoạn trống, bạn không thể chọn đoạn văn. Thật kỳ lạ nhưng tôi cũng đã cố gắng với một yếu tố sau đêm qua, đoán tôi đã quá buồn ngủ :) Bây giờ nó là khá mát mẻ gây ra bạn có thể thêm một biểu tượng ngắt dòng sau mỗi dòng như thế này: .editor p:after { content: "\21A9"; color:#CCC; } - just some guy


Vì bạn muốn các số dòng và dòng xuất hiện theo kiểu bảng, cách tiếp cận tự nhiên là tạo bảng cho chúng: khai báo vùng có thể chỉnh sửa dưới dạng bảng (theo nghĩa CSS), tạo các hàng dòng và tạo các ô trong bảng số tạo ra :

.editor {
	display: tablek;
    border: 1px black solid;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    counter-reset: line;
	
	width:90%;
	height:350px;
	overflow:scroll;
	padding-left:0;
	margin-left:0;
	z-index:1;
	
}
.editor p {
	display: table-row;
    counter-increment: line;
	background-color:#FFF;
	text-align:left;
	margin:0px;
	z-index:2;
	outline: none;
	
}
.editor p:before {
	display: table-cell;
    width:2em;
	height:100%;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
	color:#FFF;
	background-color:#006;
	text-align:right;
	
	/*-webkit-user-select: none;
    user-select: none;*/
}
<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div> 


2
2017-10-19 10:47



đó cũng là khá tốt, nhưng một lần nữa IE messes thứ lên. Bạn không thể chỉnh sửa văn bản trong các đoạn văn. - just some guy


http://jsfiddle.net/zppb29jw/2/

p {
    position:relative;
    left: 4em;
    ...

p:before {
    position:absolute;
    right:100%
    display:block;
    ...

có ổn không?


0
2017-10-19 10:44