سوال درمورد overflow

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقت بخیر

درمورد این پراپرتی‌ها سوال داشتم که چطور کار میکنن؟

overflow-anchor و overflow-block و overflow-wrap

سلام. وقت شما هم بخیر

1. overflow-wrap

این پراپرتی تعیین می‌کنه که متن طولانی که به‌طور عادی به خط بعدی نمی‌ره، چطور رفتار کنه. یعنی وقتی یه کلمه خیلی بلنده و نمی‌شه شکستش، با این پراپرتی می‌تونید مشخص کنید که متن توی باکس قرار بگیره یا از باکس بزنه بیرون. مثال زیر رو بررسی کنید:

<div style="width: 200px; overflow-wrap: break-word;">
ThisIsAReallyLongWordThatWouldNotNormallyBreakAndWouldOverflowItsContainer
</div>

2. overflow-anchor
این پراپرتی به ما کمک می‌کنه وقتی محتوای صفحه در حال تغییر یا اضافه شدن هست، موقعیت اسکرول حفظ بشه و صفحه به‌طور ناگهانی بالا یا پایین نره.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow Anchor Example</title>
    <style>
        .container {
            height: 200px;
            overflow-y: scroll;
            overflow-anchor: auto;
            border: 1px solid black;
        }
        .item {
            padding: 10px;
            border-bottom: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="container" id="list">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <script>
        setInterval(() => {
            const list = document.getElementById('list');
            const newItem = document.createElement('div');
            newItem.className = 'item';
            newItem.textContent = `Item ${list.children.length + 1}`;
            list.appendChild(newItem);
        }, 2000);
    </script>
</body>
</html>

تو این مثال، هر 2 ثانیه یک آیتم جدید به لیست اضافه می‌شه. با استفاده از overflow-anchor: auto;، موقعیت اسکرول حفظ می‌شود و صفحه نمی‌پره.

3. overflow-block
این پراپرتی تعیین می‌کنه که محتوای اضافی در جهت بلوکی (عمودی) چطور نمایش داده بشه. مثلاً اگه ارتفاع یک عنصر مشخص باشه و محتوای داخلش بیشتر از اون ارتفاع باشه، می‌تونیم با این پراپرتی مشخص کنیم که محتوای اضافی نمایش داده بشه یا پنهان بشه...

استاد مهستی سروستانی ۱۸ خرداد ۱۴۰۳، ۰۷:۵۴

سلام. وقت شما هم بخیر

1. overflow-wrap

<div style="width: 200px; overflow-wrap: break-word;">
ThisIsAReallyLongWordThatWouldNotNormallyBreakAndWouldOverflowItsContainer
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow Anchor Example</title>
    <style>
        .container {
            height: 200px;
            overflow-y: scroll;
            overflow-anchor: auto;
            border: 1px solid black;
        }
        .item {
            padding: 10px;
            border-bottom: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="container" id="list">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <script>
        setInterval(() => {
            const list = document.getElementById('list');
            const newItem = document.createElement('div');
            newItem.className = 'item';
            newItem.textContent = `Item ${list.children.length + 1}`;
            list.appendChild(newItem);
        }, 2000);
    </script>
</body>
</html>

بهترین پاسخ

استاد مهستی سروستانی ۱۸ خرداد ۱۴۰۳، ۰۷:۵۴