2016-01-13 23 views
7

Bối cảnh:On tràn tạo ra một văn bản div và chuyển giao tràn mới cho div mới

tôi đang làm việc trên một dự án mà nếu hoàn thành đúng nên có chức năng như một trình soạn thảo văn bản chuyên ngành. Nó đặc biệt cần các trang cho đầu ra, vì vậy không giống như hầu hết các trình soạn thảo văn bản trực tuyến mà chỉ đơn giản là sử dụng một hộp văn bản mở rộng hoặc một cái gì đó tương tự về mặt máy móc, tôi đang tìm cách tạo ra một "trang mới" (một container mới về cơ bản) khi nó tràn

Tôi tìm thấy một related stackoverflow question và dường như từ tìm kiếm của tôi rằng hầu hết các giải pháp sẽ không tốt nhất để chủ động thay đổi văn bản và phù hợp hơn khi được sử dụng khi hiển thị trang. Trong những hoàn cảnh tối ưu, nó sẽ hoạt động giống như việc tạo một trang mới trên một tài liệu word (tự động tạo nó khi nó tràn) và sử dụng javascript/jquery.

Tôi nhận ra rằng việc làm điều này có vẻ phức tạp hơn là ban đầu nhưng tôi hy vọng ai đó sẽ biết một bài báo hoặc một đoạn mã có thể chỉ cho tôi đúng hướng.

Vấn đề:

Tôi nghĩ rằng tôi có thể xử lý thực sự "tạo trang mới" (bên cạnh div container) nhưng tôi không chắc chắn làm thế nào để xử lý các văn bản tràn tích cực. Ví dụ, nếu ai đó xóa một số văn bản trên trang đầu tiên, nó sẽ rất khó sử dụng nếu văn bản trên trang thứ hai chỉ đơn giản là treo ở đó. Tôi muốn văn bản/trang phản ứng ít nhất tương tự như về cách thức chúng sẽ xảy ra nếu bạn đang chỉnh sửa tài liệu từ.

Tôi không muốn kiểm tra văn bản mỗi khi một nhân vật được thêm vào hoặc bị xóa, nhưng đây có phải là cách duy nhất để làm điều gì đó như vậy không? Và nếu vậy, cách hiệu quả nhất để tôi làm điều đó là gì, vì vậy tôi không làm hỏng trình duyệt.

Đây là dự án tôi đang làm việc trên để cung cấp cho bối cảnh nhiều hơn http://www.naturalcrit.com/homebrew/

+2

Tôi nghĩ bạn sẽ phải tích cực kiểm tra đầu vào của người dùng để chỉnh lại văn bản. Tại sao không sử dụng một cái gì đó giống như các plugin collumnizer như là một điểm khởi đầu: http://welcome.totheinter.net/columnizer-jquery-plugin/ – Patareco

+1

Tôi không thấy làm thế nào bạn sẽ có được đi từ nhìn vào tổ hợp phím. Trừ khi bạn có thể bắt một bộ chọn kiểu giả như ': tràn ', nhưng điều đó không tồn tại. Cần một ví dụ về những gì bạn đang làm để có thể nói chắc chắn. Bạn có thể bọc một 'div' trong một' div' và xem lại chiều cao hoặc chiều rộng của 'div' bên trong được đưa đến một ngưỡng của' div' bên ngoài, sau đó di chuyển "overflow". Bạn vẫn phải liên kết sự kiện với các lần nhấn phím vì bạn đang đo 'w' và' h' của 'div' bên trong mỗi lần thay đổi nội dung của nó. Có lẽ bạn có thể liên kết với '.change()'. – Twisty

+1

Xem http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery cho một số kỹ thuật phát hiện tràn. – Twisty

Trả lời

1

Tôi nghĩ rằng câu trả lời tốt nhất cho cả hai chức năng và đơn giản là sử dụng CSS3 column và chỉ cho phép nó để mở rộng widthwise. Sau đó, thêm kiểu cho các cột hoặc các yếu tố khác để làm cho chúng trở thành trông giống như trang. Thêm thanh cuộn x trục để cuộn qua các trang giả (chỉ là nhiều cột có chiều cao cố định) và thực tế được thực hiện.

Điều này có nghĩa là các trang sẽ chuyển sang trái sang phải thay vì lên và xuống nhưng không phải là giải pháp tồi chút nào. Cảm ơn bạn @Twisty cho các giải pháp đơn giản bằng cách sử dụng một cái gì đó tôi đã được sử dụng và dễ dàng có quyền truy cập vào. Nó thậm chí không liên quan đến mã, chỉ cần thêm một số CSS nữa!

+0

Giải quyết tốt! Thưởng thức! – Twisty

Các vấn đề liên quan