ما هو الفرق بين overflow:hidden and display:none

Question

ما هو الفرق بين overflow:hidden and display:none?

Answer 1

على سبيل المثال:

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

إذا كان النص في كتلة مع هذه الفئة أكبر (أطول) من ما هذا الصندوق الصغير يمكن عرض الفائض سوف يكون فقط خفية.سوف نرى بداية النص فقط.

display: none; فقط سوف إخفاء كتلة.

ملاحظة يجب عليك أيضا visibility: hidden; الذي يخفي محتوى بلوك, ولكن الكتلة سوف تكون لا تزال في تخطيط تحريك الأشياء.

Answer 2

display: none إزالة العنصر من الصفحة ، وتدفق الصفحة يتصرف كما لو انه ليس هناك على الإطلاق.

تجاوز:خفية:

CSS overflow: hidden الخاصية يمكن استخدامها للكشف عن أكثر أو أقل من عنصر استنادا إلى عرض نافذة المتصفح.

Answer 3

Overflow:hidden يقول إذا نص يتدفق خارج هذا عنصر التمرير لا تظهر.عرض:لا شيء يقول عنصر لا يظهر.

Answer 4

مثال بسيط من فيض:خفية http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

إذا قمت بتحرير CCS في هذه الصفحة يمكنك ان ترى الفرق بين سمات تجاوز (مرئية | خفية | التمرير | سيارات ) - و إذا قمت بإضافة العرض:أي css, سوف ترى كل كتلة المحتوى هو يختفي.

أساسا انها وسيلة للسيطرة على تخطيط عنصر "تدفق" -- إذا كنت السماح إدخال المستخدم (من CMS مجال القول) أن تقدم في ثابت الحجم كتلة ، يمكنك ضبط تجاوز السمة لوقف مربع زيادة في الحجم وبالتالي كسر تخطيط الصفحة.(على العكس من ذلك ، عرض:لا شيء يمنع عنصر من عرض و ممكن الصفحة بأكملها إعادة ضبط)

Answer 5

بشكل افتراضي, HTML العناصر طويل القامة كما يشترط أن تحتوي على محتواها.

إذا كنت تعطي عنصر HTML ارتفاع ثابت ، قد لا تكون كبيرة بما يكفي لاحتواء محتواه.لذا, فعلى سبيل المثال, إذا كان لديك الفقرة مع ارتفاع ثابت و خلفية زرقاء:

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

النص في الفقرة لن تتجاوز الحافة السفلية من الفقرة.

على overflow الخاصية تسمح لك تغيير هذا السلوك الافتراضي.لذا ، إذا كنت وأضاف overflow: hidden:

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

فإنك لن ترى أي من النص ما وراء الحافة السفلية من الفقرة.سيكون قص ارتفاع ثابت من الفقرة.

display: none ببساطة جعل كامل الفقرة (بصريا) تختفي, خلفية زرقاء و كل شيء, كما لو أنها لم تظهر في HTML على الإطلاق.

Answer 6

دعونا نقول لديك div أن التدابير 100 × 100px

ثم وضع كمية كبيرة من النص في ذلك ، كما يفيض div.إذا كنت تستخدم overflow: hidden; ثم النص الذي يناسب في 100x100 لن يتم عرض, ولن تؤثر على تخطيط.

display: none هو مختلف تماما.يجعل بقية الصفحة كما لو إذا كان div لا تزال مرئية.حتى إذا كان هناك تجاوز ، التي سوف تؤخذ في الاعتبار.ببساطة يترك مساحة div, ولكن لا تجعل ذلك.إذا كان كلاهما مجموعة: display: none; overflow: hidden; ثم لن يتم عرض النص لا تجاوز ، الصفحة سيتم تقديمها كما لو كان غير مرئي div كانت لا تزال هناك.

من أجل جعل div لا يؤثر التقديم في كل شيء ، ثم كلا display: none; overflow: hidden; يجب تعيين ، أيضا ، أن تفعل شيئا مثل مجموعة height: 0;.أو مع width, أو كليهما ثم الصفحة سيتم تقديمها كما لو div لم تكن موجودة على الإطلاق.

Answer 7

تجاوز:مخبأة - يخفي تجاوز المحتوى ، في تناقض مع تجاوز:لصناعة السيارات في التمرير الذي يظهر على ثابت الحجم div حيث المحتوى الداخلي أكبر من حجمه

عرض:لا يخفي عنصر تماما لا مشارك في تخطيط المحتوى

P. S.لا يوجد فرق بين الاثنين ، فهي لا علاقة لها تماما

Answer 8

عرض:لا شيء يعني أن العلامة في السؤال لا تظهر على الصفحة في كل شيء (على الرغم من لا يزال يمكنك التفاعل معها من خلال dom).لن يكون هناك المساحات المخصصة لها بين العلامات الأخرى.تجاوز مخفي يعني أن العلامة المقدمة مع ارتفاع معين و أي نص وغيرها التي تسبب الوسم لتوسيع لتقديم وسوف يتم عرض.أعتقد أن ما كنت أقصد أن نسأل visibility:hidden.هذا يعني أنه على عكس عرض أي علامة غير مرئية ، ولكن المساحة المخصصة لها في الصفحة.لذلك على سبيل المثال

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display:none ليكون:

اختبار | | اختبار

visibility:hidden ليكون:

اختبار | | اختبار

في visibility:hidden العلامة المقدمة ، فإنه ليس فقط ينظر في الصفحة.