วิธีครอบตัดข้อความขนาดยาวด้วย CSS ครอบตัดข้อความที่มีความสูงหนึ่งหรือหลายบรรทัดด้วยการเพิ่มจุดไข่ปลา การเพิ่มการไล่ระดับสีให้กับข้อความ

Vlad Merzhevich

แม้ว่าที่จริงแล้วจอภาพของเส้นทแยงมุมขนาดใหญ่จะสามารถเข้าถึงได้มากขึ้นเรื่อยๆ และความละเอียดของจอภาพก็เพิ่มขึ้นอย่างต่อเนื่อง แต่บางครั้ง งานก็เกิดขึ้นในพื้นที่จำกัดเพื่อให้พอดีกับข้อความจำนวนมาก ตัวอย่างเช่น อาจจำเป็นสำหรับไซต์เวอร์ชันมือถือหรืออินเทอร์เฟซที่จำนวนบรรทัดมีความสำคัญ ในกรณีเช่นนี้ ควรตัดข้อความยาวๆ ทิ้งให้เหลือเพียงจุดเริ่มต้นของประโยคเท่านั้น ดังนั้นเราจะนำอินเทอร์เฟซมาในรูปแบบกะทัดรัดและลดปริมาณข้อมูลที่แสดง การตัดแต่งเส้นจริงสามารถทำได้บนฝั่งเซิร์ฟเวอร์โดยใช้ PHP เดียวกัน แต่ด้วย CSS จะง่ายกว่า นอกจากนี้ คุณยังสามารถแสดงข้อความทั้งหมดได้เสมอ ตัวอย่างเช่น เมื่อคุณวางเคอร์เซอร์เหนือข้อความนั้นด้วยเคอร์เซอร์ของเมาส์ ต่อไปเราจะพิจารณาวิธีการตัดข้อความด้วยกรรไกรจินตภาพ

อันที่จริง ทั้งหมดนั้นมาจากการใช้คุณสมบัติล้นที่มีค่าที่ซ่อนอยู่ ความแตกต่างอยู่ในการแสดงข้อความของเราที่แตกต่างกันเท่านั้น

ใช้ล้น

เพื่อให้คุณสมบัติล้นแสดงตัวเองพร้อมกับข้อความในทุกระดับ คุณต้องยกเลิกการตัดข้อความโดยใช้ช่องว่างด้วยค่า nowrap หากยังไม่เสร็จสิ้น เอฟเฟกต์ที่เราต้องการจะไม่เป็นอีกต่อไป การใส่ยัติภังค์จะถูกเพิ่มลงในข้อความและจะแสดงอย่างครบถ้วน ตัวอย่างที่ 1 แสดงวิธีการตัดแต่งข้อความยาวด้วยชุดคุณสมบัติสไตล์ที่ระบุ

ตัวอย่างที่ 1.ล้นสำหรับข้อความ

HTML5 CSS3 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่ 1.

ข้าว. 1. ประเภทของข้อความหลังจากใช้คุณสมบัติล้น

ดังที่คุณเห็นจากรูปภาพ โดยทั่วไปมีข้อเสียเพียงข้อเดียว - ไม่ชัดเจนว่าข้อความมีความต่อเนื่อง ดังนั้นผู้ใช้จะต้องตระหนักถึงสิ่งนี้ โดยปกติจะทำด้วยการไล่ระดับสีหรือจุดไข่ปลา

เพิ่มการไล่ระดับสีให้กับข้อความ

เพื่อให้ชัดเจนยิ่งขึ้นว่าข้อความทางด้านขวาไม่สิ้นสุด คุณสามารถซ้อนทับด้วยการไล่ระดับสีจากสีโปร่งใสเป็นสีพื้นหลัง (รูปที่ 2) สิ่งนี้จะสร้างเอฟเฟกต์ของการละลายข้อความทีละน้อย

ข้าว. 2. ข้อความไล่โทนสี

ตัวอย่างที่ 2 แสดงวิธีการสร้างเอฟเฟกต์นี้ รูปแบบขององค์ประกอบนั้นจะยังคงเหมือนเดิม การไล่ระดับสีจะถูกเพิ่มโดยใช้ :: หลังจากองค์ประกอบหลอกและ CSS3 ในการทำเช่นนี้ เราแทรกองค์ประกอบหลอกที่ว่างเปล่าผ่านคุณสมบัติเนื้อหา และใช้การไล่ระดับสีกับองค์ประกอบด้วยคำนำหน้าที่แตกต่างกันสำหรับเบราว์เซอร์หลัก (ตัวอย่างที่ 2) ความกว้างของการไล่ระดับสีสามารถเปลี่ยนได้อย่างง่ายดายผ่านความกว้าง คุณยังสามารถปรับระดับความโปร่งใสได้ด้วยการแทนที่ค่า 0.2 ด้วยของคุณเอง

ตัวอย่างที่ 2 ไล่ระดับเหนือข้อความ

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

arpeggio แบบแยกส่วนภายในจะเปลี่ยนแถวโพลี นี่คือแนวตั้งขั้นตอนเดียวในผ้าอัลตร้าโพลีโฟนิก

วิธีนี้ใช้ไม่ได้ใน Internet Explorer จนถึง 8.0 และรวมถึง 8.0 เนื่องจากไม่รองรับการไล่ระดับสี แต่คุณสามารถเลิกใช้ CSS3 และทำให้การไล่ระดับสีเป็นแบบสมัยเก่าได้โดยใช้รูปภาพ PNG-24

วิธีนี้ใช้ได้กับพื้นหลังแบบทึบเท่านั้น และในกรณีของรูปภาพพื้นหลัง การไล่ระดับสีเหนือข้อความจะดูโดดเด่น

วงรีที่ท้ายข้อความ

คุณยังสามารถใช้จุดไข่ปลาแทนการไล่ระดับสีที่ส่วนท้ายของข้อความที่ตัด นอกจากนี้ มันจะถูกเพิ่มโดยอัตโนมัติโดยใช้คุณสมบัติ text-overflow เป็นที่เข้าใจโดยเบราว์เซอร์ทั้งหมด รวมทั้ง IE เวอร์ชันเก่า และข้อเสียเปรียบเพียงอย่างเดียวของคุณสมบัตินี้คือสถานะที่ยังไม่ชัดเจน ดูเหมือนว่าคุณสมบัตินี้จะรวมอยู่ใน CSS3 แต่รหัสที่มาพร้อมกับคุณสมบัตินี้ไม่ผ่านการตรวจสอบความถูกต้อง

ตัวอย่างที่ 3 แสดงการใช้คุณสมบัติข้อความล้นด้วยจุดไข่ปลา ซึ่งเพิ่มจุดไข่ปลา เมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือข้อความ ข้อความนั้นจะแสดงอย่างครบถ้วนและเน้นด้วยสีพื้นหลัง

ตัวอย่างที่ 3 การใช้ข้อความล้น

HTML5 CSS3 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่ 3.

ข้าว. 3. ข้อความที่มีจุดไข่ปลา

ข้อดีอย่างมากของวิธีการเหล่านี้คือความจริงที่ว่าการไล่ระดับสีและจุดไข่ปลาจะไม่แสดงหากข้อความสั้นและพอดีกับพื้นที่ที่ระบุทั้งหมด ดังนั้นข้อความจะแสดงตามปกติเมื่อมองเห็นได้ทั้งหมดบนหน้าจอและถูกตัดออกเมื่อความกว้างขององค์ประกอบลดลง

ในบางกรณี เนื้อหาของบล็อกจะแสดงอยู่นอกขอบเขตขององค์ประกอบ โดยซ้อนทับกัน คุณสมบัติล้นใช้เพื่อควบคุมการทำงานขององค์ประกอบบล็อก ซึ่งกำหนดวิธีการแสดงเนื้อหาที่ไหลออกนอกบล็อก

เมื่อใช้คุณสมบัติคลิป คุณสามารถคลิปองค์ประกอบตามขนาดที่ระบุได้

1. คุณสมบัติล้น

เนื้อหาขององค์ประกอบบล็อกสามารถล้นบล็อกได้เมื่อมีการตั้งค่าความสูงและ / หรือความกว้างอย่างชัดเจนสำหรับบล็อก กล่องจะยืดออกเพื่อรองรับเนื้อหาโดยไม่ระบุความสูง เว้นแต่กล่องจะอยู่ในตำแหน่ง: สัมบูรณ์; หรือตำแหน่ง: คงที่; ... ข้อความสามารถล้นบล็อกในความสูง รูปภาพ - ความสูงและความกว้าง

2. คุณสมบัติล้น-x

คุณสมบัติระบุว่าขอบด้านขวาของเนื้อหาภายในบล็อกจะถูกตัดออกอย่างไรในกรณีที่ล้น

ไวยากรณ์:

Div (ล้น-x: ซ่อน;)

3. คุณสมบัติล้น-y

คุณสมบัติระบุว่าขอบด้านล่างของเนื้อหาภายในบล็อกจะถูกตัดออกอย่างไรหากล้น

ไวยากรณ์:

Div (ล้น-y: ซ่อน;)

4. คุณสมบัติของคลิป

คุณสมบัติกำหนดว่าส่วนใดขององค์ประกอบที่จะมองเห็นได้ ส่วนขององค์ประกอบที่ยังคงมองเห็นได้หลังจากการตัดออกเรียกว่าบริเวณการตัด การตัดทอนถูกนำไปใช้กับองค์ประกอบที่มองเห็นได้อย่างสมบูรณ์ในตอนแรก คุณสมบัตินี้ใช้กับองค์ประกอบที่มีการตั้งค่าคุณสมบัติตำแหน่งเป็นค่าสัมบูรณ์หรือคงที่

มีข้อความที่มีความยาวตามอำเภอใจที่ต้องแสดงภายในบล็อกที่มีความสูงและความกว้างคงที่ ในกรณีนี้ หากข้อความไม่พอดีทั้งหมด ควรแสดงข้อความที่พอดีกับบล็อกที่ระบุโดยสมบูรณ์ หลังจากนั้นจุดไข่ปลาจะถูกตั้งค่า

งานนี้ค่อนข้างธรรมดา แต่ในขณะเดียวกันก็ไม่ได้เล็กน้อยอย่างที่คิด

ตัวเลือกสำหรับข้อความบรรทัดเดียวใน CSS

ในกรณีนี้ คุณสามารถใช้คุณสมบัติ text-overflow: ellipsis ในกรณีนี้ ตู้คอนเทนเนอร์ต้องมีคุณสมบัติ ล้นเท่ากับ ที่ซ่อนอยู่หรือ คลิป

บล็อก (ความกว้าง: 250px; white-space: nowrap; ล้น: ซ่อน; text-overflow: ellipsis;)

ตัวเลือกสำหรับข้อความ CSS แบบหลายบรรทัด

วิธีแรกในการครอบตัดข้อความหลายบรรทัดโดยใช้คุณสมบัติ CSS คือการใช้องค์ประกอบหลอก : ก่อนและ : หลังจาก... ขั้นแรก มาร์กอัป HTML

และตอนนี้คุณสมบัติตัวเอง

กล่อง (ล้น: ซ่อน; ความสูง: 200px; ความกว้าง: 300px; ความสูงบรรทัด: 25px;) .box: ก่อน (เนื้อหา: ""; float: ซ้าย; ความกว้าง: 5px; ความสูง: 200px;) .box> *: ก่อน -ลูก (ลอย: ขวา; ความกว้าง: 100%; ระยะขอบซ้าย: -5px;) .box: หลังจาก (เนื้อหา: "\ 02026"; box-sizing: content-box; float: right; ตำแหน่ง: สัมพันธ์; ด้านบน: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient (to right, rgba) (255, 255, 255, 0), ขาว 50%, ขาว);)

อีกวิธีหนึ่งคือใช้คุณสมบัติความกว้างคอลัมน์ที่เรากำหนดความกว้างคอลัมน์สำหรับข้อความหลายบรรทัด อย่างไรก็ตาม เมื่อใช้วิธีนี้ คุณจะไม่ได้จุดไข่ปลาในตอนท้าย HTML:

บล็อก (ล้น: ซ่อน ความสูง: 200px ความกว้าง: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; ความกว้างของคอลัมน์: 150px ความสูง: 100%;)

โซลูชันที่สามสำหรับข้อความหลายบรรทัดใน CSS สำหรับเบราว์เซอร์ Webkit... ในนั้นเราจะต้องใช้คุณสมบัติเฉพาะหลายอย่างพร้อมคำนำหน้า -webkit... ตัวหลักคือ -webkit-line-clamp ซึ่งให้คุณระบุจำนวนบรรทัดที่จะแสดงในบล็อก วิธีแก้ปัญหานั้นสวยงามแต่ค่อนข้างจำกัดเนื่องจากทำงานในกลุ่มเบราว์เซอร์ที่จำกัด

บล็อก (ล้น: ซ่อน ข้อความล้น: จุดไข่ปลา แสดง: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: แนวตั้ง;)

ตัวแปร JavaScript สำหรับข้อความหลายบรรทัด

มีการใช้บล็อกที่มองไม่เห็นเพิ่มเติมที่นี่ ซึ่งในตอนแรกข้อความของเราถูกวาง หลังจากนั้น อักขระหนึ่งตัวจะถูกลบออกทีละตัวจนกว่าความสูงของบล็อกนี้จะน้อยกว่าหรือเท่ากับความสูงของบล็อกที่ต้องการ และในตอนท้าย ข้อความจะย้ายไปที่บล็อกเดิม

var block = เอกสาร querySelector (".block"), ข้อความ = บล็อก innerHTML, โคลน = เอกสาร createElement ("div"); โคลน สไตล์. ตำแหน่ง = "แน่นอน"; โคลน สไตล์. การมองเห็น = "ซ่อน"; โคลน สไตล์. ความกว้าง = บล็อก ลูกค้ากว้าง + "px"; โคลน innerHTML = ข้อความ; เอกสาร. ร่างกาย. appendChild (โคลน); var l = ข้อความ ความยาว - 1; for (; l> = 0 && clone. clientHeight> block. clientHeight; - l) (clone. innerHTML = text. substring (0, l) + "...";) block. innerHTML = โคลน innerHTML;

อยู่ในรูปแบบของปลั๊กอิน jQuery:

(ฟังก์ชัน ($) (var truncate = function (el) (var text = el. text (), height = el. height (), clone = el. clone (); clone. css ((ตำแหน่ง: "แน่นอน", การมองเห็น: "ซ่อน" ความสูง: "อัตโนมัติ")); el. after (โคลน); var l = text. length - 1; for (; l> = 0 && clone. height ()> height; - l) ( clone. text (text. substring (0, l) + "...");) el. text (clone. text ()); clone. remove ();); $. fn. truncateText = function () () ส่งคืนสิ่งนี้ แต่ละ (ฟังก์ชัน () (ตัดทอน ($ (นี้));));) (jQuery));

สวัสดีทุกคน ฉันชื่อ Anna Blok และวันนี้เราจะมาพูดถึงวิธีการครอบตัดรูปภาพโดยไม่ต้องใช้โปรแกรมกราฟิก

สิ่งนี้มีประโยชน์ที่ไหน?

อย่างแรกเลย ในไซต์ที่เนื้อหาที่มีรูปภาพมักจะไม่ถูกตัดไปยังบล็อกใดโดยเฉพาะ

ตัวอย่างที่เด่นชัด: บล็อก WordPress.

สมมติว่าคุณต้องการให้หน้าปกบทความของคุณเป็นแบบ 1: 1 (สี่เหลี่ยมจัตุรัส) การกระทำของคุณ:

1. ดาวน์โหลดรูปภาพที่เหมาะสมจากอินเทอร์เน็ต
2. ครอบตัดใน Photoshop ตามสัดส่วนที่ต้องการ
3. เผยแพร่บทความของคุณ

เมื่อเข้าสู่เว็บไซต์แล้วคุณจะเห็นผลลัพธ์ที่คุณคาดไว้

แต่สมมติว่าคุณลืมครอบตัดรูปภาพใน Photoshop และอัปโหลดรูปภาพแบบสุ่มเป็นหน้าปกจากอินเทอร์เน็ตจะเกิดอะไรขึ้น! ถูกต้อง เลย์เอาต์จะพัง และหากคุณไม่ได้ใช้ CSS เลย รูปภาพความละเอียด HD อาจซ้อนทับมุมมองทั้งหมดของข้อความ ดังนั้นจึงเป็นสิ่งสำคัญที่จะสามารถครอบตัดรูปภาพโดยใช้สไตล์ CSS

มาดูสถานการณ์ต่างๆ กันว่าจะใช้งานสิ่งนี้ได้อย่างไร ไม่เพียงแต่กับ CSS เท่านั้น แต่ยังรวมถึง SVG ด้วย

ตัวอย่างที่ 1

มาลองครอบตัดรูปภาพที่วางกับ background-image กัน มาสร้างมาร์กอัป HTML กันเถอะ

ย้ายไปยังการจัดรูปแบบ CSS ใช้ background-image เพิ่มรูปภาพ กำหนดเส้นขอบสำหรับรูปภาพของเรา จัดกึ่งกลางรูปภาพโดยใช้ตำแหน่งพื้นหลัง และตั้งค่าขนาดพื้นหลัง:

JPG); พื้นหลังตำแหน่ง: ศูนย์กลาง; ขนาดพื้นหลัง: ปก; ความกว้าง: 300px; ความสูง: 300px; )

นี่เป็นวิธีแรกและง่ายที่สุดในการตัดภาพ ทีนี้มาดูตัวอย่างที่สองกัน

ตัวอย่าง 2

สมมติว่าเรามีคอนเทนเนอร์กล่องเดียวกันซึ่งมีแท็ก img พร้อมรูปภาพที่เราจะจัดสไตล์ในตอนนี้

นอกจากนี้เรายังจะวางภาพไว้กึ่งกลางสัมพันธ์กับวัตถุที่เราจะสร้าง และเราใช้คุณสมบัติที่ไม่ค่อยได้ใช้: วัตถุพอดี

กล่อง (ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ความกว้าง: 300px; ความสูง: 300px;) .box img (ตำแหน่ง: สัมบูรณ์; บนสุด: 50%; ซ้าย: 50%; แปลง: แปล (-50%, - 50%); ความกว้าง: 300px; ความสูง: 300px; วัตถุพอดี: ปก;)

นี่เป็นวิธีที่ดีที่สุดในความคิดของฉัน เหมาะอย่างยิ่งสำหรับการเขียนบล็อกหากคุณใช้รูปภาพสำหรับโพสต์ในสัดส่วนที่ต่างกันมาก

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

ตัวอย่างที่ 3

นอกจากนี้เรายังสามารถสร้างการครอบตัดสำหรับรูปภาพได้ในขณะนี้ หากเราแทรกลงในองค์ประกอบ SVG ลองใช้วงกลมเป็นตัวอย่าง เราสามารถสร้าง SVG โดยใช้แท็ก สร้างแท็ก svg เส้นขอบภายใน ซึ่งจะมีแท็กวงกลมและแท็กรูปแบบ ในแท็กรูปแบบ ให้เขียนแท็กรูปภาพ ในนั้นเราระบุแอตทริบิวต์ xlink: href และเพิ่มรูปภาพ นอกจากนี้เรายังจะเพิ่มแอตทริบิวต์ความกว้างและความสูง แต่นั่นไม่ใช่ทั้งหมด เราจะต้องเพิ่มค่าเติม เพื่อให้งานของเราสมบูรณ์ เราจะเพิ่มแอตทริบิวต์ saveAspectRatio เสริมให้กับแท็กรูปภาพ ซึ่งจะเติมรูปภาพของเรา "จากและไปยัง" รอบวงกลม

ฉันไม่สามารถเรียกวิธีนี้ว่าเป็นสากลได้ แต่สามารถใช้ได้ในกรณีพิเศษ ตัวอย่างเช่น หากเราพูดถึงหัวข้อของบล็อก วิธีการดังกล่าวอาจเหมาะสมกับอวาตาร์ของผู้เขียนที่เขียนบทความ

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

ผลลัพธ์:
เราได้ครอบคลุมถึง 3 วิธีในการครอบตัดรูปภาพบนเว็บไซต์: การใช้ background-image โดยใช้แท็ก img และเชื่อมโยงกับรูปแบบ svg ด้วยการฝังบิตแมปโดยใช้แท็กรูปภาพ หากคุณรู้จักวิธีการอื่นใดในการครอบตัดรูปภาพโดยใช้ SVG ให้แบ่งปันในความคิดเห็น มันจะมีประโยชน์ไม่เพียง แต่สำหรับฉัน แต่ยังสำหรับคนอื่น ๆ ในการเรียนรู้เกี่ยวกับพวกเขา

อย่าลืมถามคำถามเกี่ยวกับการเข้ารหัสหรือการพัฒนาส่วนหน้ากับผู้เชี่ยวชาญใน FrontendHelp ทางออนไลน์

ในบทความนี้เราจะบอกคุณเกี่ยวกับ 3 เทคนิค CSS ที่ง่ายและรวดเร็วที่คุณสามารถใช้แสดงเฉพาะบางส่วนของรูปภาพบนเพจของคุณ

วิธีการทั้งหมดที่ใช้ในที่นี้ต้องการเพียงสองสามบรรทัดเท่านั้น CSSรหัส. อย่างไรก็ตาม นี่ไม่ใช่การขลิบตามความหมายที่แท้จริงของคำ ( CSSยังทำไม่ได้) เราแค่ซ่อนและแสดงเฉพาะส่วนนั้นของภาพที่เราอยากเห็น

เทคนิคเหล่านี้มีประโยชน์มากหากคุณต้องการทำให้รูปภาพมีขนาดที่แน่นอน กล่าวคือ คุณต้องการสร้างภาพขนาดย่อ เช่น ภาพขนาดย่อ (สำเนาย่อของรูปภาพ) ในส่วนข่าวหรือสิ่งที่คล้ายกัน

เทคนิค 1 - การใช้ระยะขอบเชิงลบ ( ระยะขอบติดลบ)

หากคุณไม่ต้องการใช้ระยะขอบติดลบ เราขอแนะนำให้ใช้เทคนิค №2 ... ประกอบด้วยพาเรนต์ (ย่อหน้า) ที่มีความกว้างและความสูงเฉพาะ ย่อหน้านี้มีคุณสมบัติ การวางตำแหน่งระบุเป็นญาติ ความกว้างและความสูงกำหนดขนาดของฟิลด์ที่แสดง และรูปภาพที่วางอยู่ภายในย่อหน้ามีคุณสมบัติ การวางตำแหน่งกำหนดให้เป็นแบบสัมบูรณ์ แล้วเราก็ใช้คุณสมบัติได้ ด้านบน (ด้านบน)และ ซ้ายจัดเรียงรูปภาพตามที่เราต้องการ ในกระบวนการกำหนดว่าจะแสดงส่วนใดของรูปภาพ และไม่

Htmlเหมือนกับรหัสจากเทคนิคก่อนหน้านี้:

เทคนิคที่ 3 - การใช้คุณสมบัติการแบ่งส่วน ( ทรัพย์สินคลิป)

เทคนิคนี้น่าจะง่ายที่สุดตั้งแต่ คุณสมบัติของคลิปกำหนดส่วนขององค์ประกอบที่จะแสดง ดูเหมือนจะเป็นทางออกที่สมบูรณ์แบบ แต่ก็มี อุปสรรค์เดียว: องค์ประกอบที่ถูกตัดออกจะต้องถูกจัดวางอย่างแน่นอน เพื่อให้สามารถใช้องค์ประกอบได้เราต้องเพิ่มองค์ประกอบเพิ่มเติมคำนวณขนาดของพื้นที่ที่มองเห็นของภาพเพิ่มขนาดนี้ให้กับผู้ปกครองใช้ผู้ปกครอง ... งานเยอะไม่ใช่ มัน?

อ้อ อีกปัญหาหนึ่ง: ขนาดขององค์ประกอบที่ตัดแล้วไม่ได้ลดขนาดลงจนถึงขนาดครอบตัด แต่ยังคงเป็นขนาดดั้งเดิม (รูปภาพภายนอกการครอบตัดนั้นถูกซ่อนไว้อย่างง่าย) เราต้องใช้การวางตำแหน่งที่แน่นอนเพื่อย้ายวิวพอร์ตไปที่มุมซ้ายบนของพาเรนต์

อย่างไรก็ตามเราไม่สามารถปล่อยให้ไม่ได้กล่าวถึง หั่นคุณสมบัติ... และรหัสอีกครั้ง ...