كيفية اقتصاص نص طويل باستخدام CSS. قم بقص نص أحادي أو متعدد الأسطر في ارتفاع مع إضافة علامات الحذف مع إضافة تدرج إلى النص

فلاد مرزفيتش

على الرغم من حقيقة أن الشاشات ذات الأقطار الكبيرة تزداد سهولة الوصول إليها ، وأن الدقة تتزايد باستمرار ، إلا أن المهمة تظهر أحيانًا في مساحة محدودة لتناسب الكثير من النصوص. على سبيل المثال ، قد يكون هذا مطلوبًا لإصدار الهاتف المحمول من الموقع أو لواجهة حيث يكون عدد الأسطر مهمًا. في مثل هذه الحالات ، يكون من المنطقي اقتطاع سطور طويلة من النص ، مع ترك بداية الجملة فقط. لذلك سنقوم بإحضار الواجهة إلى نموذج مضغوط وتقليل كمية المعلومات المعروضة. يمكن إجراء التشذيب الفعلي للأسطر على جانب الخادم باستخدام نفس PHP ، ولكن من السهل من خلال CSS ، علاوة على ذلك ، يمكنك دائمًا إظهار النص بالكامل ، على سبيل المثال ، عند تحريك مؤشر الماوس فوقه. بعد ذلك ، سننظر في طرق كيفية قص النص بمقص وهمي.

في الواقع ، كل هذا يعود إلى استخدام خاصية overflow مع القيمة المخفية. الاختلافات تكمن فقط في العرض المختلف لنصنا.

باستخدام الفائض

لكي تظهر خاصية overflow نفسها مع النص بكل مجدها ، تحتاج إلى إلغاء التفاف النص باستخدام مسافة بيضاء مع القيمة nowrap. إذا لم يتم ذلك ، فلن يكون التأثير الذي نحتاجه ، وستتم إضافة الواصلة إلى النص وسيتم عرضها بالكامل. يوضح المثال 1 كيفية قطع النص الطويل بمجموعة محددة من خصائص النمط.

مثال 1. تجاوز للنص

HTML5 CSS3 IE Cr Op Sa Fx

تظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. نوع النص بعد تطبيق خاصية الفائض

كما ترى من الشكل ، هناك عيب واحد فقط بشكل عام - ليس من الواضح أن النص له استمرار ، لذلك يجب أن يكون المستخدم على علم بذلك. يتم ذلك عادةً باستخدام تدرج أو علامة حذف.

إضافة تدرج إلى النص

لتوضيح أن النص الموجود على اليمين لا ينتهي ، يمكنك تراكبه بتدرج من اللون الشفاف إلى لون الخلفية (الشكل 2). سيؤدي هذا إلى إنشاء تأثير الحل التدريجي للنص.

أرز. 2. نص متدرج

يوضح المثال 2 كيفية إنشاء هذا التأثير. سيبقى نمط العنصر نفسه عمليًا ، وسيُضاف التدرج نفسه باستخدام :: after pseudo-element و CSS3. للقيام بذلك ، نقوم بإدخال عنصر زائف فارغ من خلال خاصية المحتوى وتطبيق تدرج عليه ببادئات مختلفة للمتصفحات الرئيسية (المثال 2). يمكن تغيير عرض التدرج بسهولة من خلال العرض ، كما يمكنك ضبط درجة الشفافية عن طريق استبدال القيمة 0.2 بقيمة خاصة بك.

مثال 2. التدرج فوق النص

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

يعمل نظام تتابعي تتابعي داخلي منفصل على تحويل الصفوف المتعددة ، وهذا عبارة عن خطوة رأسية من خطوة واحدة في نسيج متعدد الألحان للغاية.

لا يعمل هذا الأسلوب في Internet Explorer حتى الإصدار 8.0 ويتضمن ذلك ، لأنه لا يدعم التدرجات اللونية. ولكن يمكنك التخلي عن CSS3 وجعل التدرج اللوني بالطريقة القديمة ، باستخدام صورة PNG-24.

تعمل هذه الطريقة فقط مع خلفية صلبة ، وفي حالة صورة الخلفية ، سيكون التدرج اللوني فوق النص ملفتًا للنظر.

الحذف في نهاية النص

يمكنك أيضًا استخدام علامات الحذف بدلاً من التدرج اللوني في نهاية النص المقطوع. علاوة على ذلك ، ستتم إضافته تلقائيًا باستخدام خاصية text-overflow. إنها مفهومة من قبل جميع المتصفحات ، بما في ذلك الإصدارات القديمة من IE ، والعيب الوحيد لهذه الخاصية هو حالتها غير الواضحة. يبدو أن هذه الخاصية مضمنة في CSS3 ، لكن الكود معها لا يجتاز عملية التحقق من الصحة.

يوضح المثال 3 استخدام خاصية تجاوز النص مع قيمة القطع ، والتي تضيف علامة حذف. عند تحريك مؤشر الماوس فوق النص ، يتم عرضه بالكامل ويتم تمييزه بلون الخلفية.

مثال 3. استخدام تجاوز النص

HTML5 CSS3 IE Cr Op Sa Fx

تظهر نتيجة هذا المثال في الشكل. 3.

أرز. 3. نص مع حذف

ميزة كبيرة لهذه الطرق هي حقيقة أن التدرج اللوني والقطع الناقص لا يتم عرضهما إذا كان النص قصيرًا ويتناسب تمامًا مع المنطقة المحددة. لذلك سيتم عرض النص كالمعتاد عندما يكون مرئيًا تمامًا على الشاشة ويتم قصه عند تقليل عرض العنصر.

في بعض الحالات ، يتم عرض محتوى الكتلة خارج حدود العنصر ، متداخلة معه. تُستخدم خاصية overflow للتحكم في سلوك عناصر الكتلة ، والتي تحدد كيفية عرض المحتوى الذي يتدفق خارج الكتلة.

باستخدام خاصية القصاصة ، يمكنك قص عنصر إلى الأبعاد المحددة.

1. خاصية تجاوز السعة

يمكن أن يتجاوز محتوى عناصر الكتلة الكتلة عندما يتم تعيين الارتفاع و / أو العرض بشكل صريح للكتلة. بدون تحديد ارتفاع ، سيتمدد الصندوق ليلائم المحتوى ، ما لم يكن الصندوق في الموضع: مطلق ؛ أو الموقف: ثابت ؛ ... يمكن أن يتجاوز النص الكتلة في الارتفاع والصور - في الطول والعرض.

2. الخاصية overflow-x

تحدد الخاصية كيف سيتم قطع الحافة اليمنى للمحتوى داخل الكتلة في حالة تجاوز السعة.

بناء الجملة:

div (overflow-x: مخفي ؛)

3. الخاصية overflow-y

تحدد الخاصية كيف سيتم قطع الحافة السفلية للمحتوى داخل الكتلة في حالة تجاوزها.

بناء الجملة:

Div (تجاوز- y: مخفي ؛)

4. خاصية المقطع

تحدد الخاصية أي جزء من العنصر سيكون مرئيًا. يسمى جزء العنصر الذي يظل مرئيًا بعد القطع منطقة القطع. يتم تطبيق Clipping على عنصر يكون مرئيًا بشكل كامل في البداية. تنطبق الخاصية على العناصر التي تم تعيين خاصية الموضع فيها إلى مطلق أو ثابت.

يوجد نص ذو طول عشوائي يجب عرضه داخل كتلة ذات ارتفاع وعرض ثابت. في هذه الحالة ، إذا لم يكن النص مناسبًا تمامًا ، فيجب عرض جزء من النص يتناسب تمامًا مع الكتلة المحددة ، وبعد ذلك يتم تعيين علامة القطع.

هذه المهمة شائعة جدًا ، لكنها في الوقت نفسه ليست تافهة كما تبدو.

خيار نص سطر واحد في CSS

في هذه الحالة ، يمكنك استخدام خاصية text-overflow: ellipsis. في هذه الحالة ، يجب أن تحتوي الحاوية على الخاصية تجاوزمساو مختفيأو مقطع

الكتلة (العرض: 250 بكسل ؛ المسافة البيضاء: nowrap ؛ تجاوز: مخفي ؛ تجاوز النص: علامة القطع ؛)

خيار لنص CSS متعدد الأسطر

الطريقة الأولى لاقتصاص النص متعدد الأسطر باستخدام خصائص CSS هي تطبيق العناصر الزائفة : قبلو : بعد، بعدما... أولاً ، ترميز HTML

والآن الخصائص نفسها

Box (تجاوز: مخفي ؛ الارتفاع: 200 بكسل ؛ العرض: 300 بكسل ؛ ارتفاع الخط: 25 بكسل ؛) .box: قبل (المحتوى: "" ؛ عائم: يسار ؛ العرض: 5 بكسل ؛ الارتفاع: 200 بكسل ؛) .box> *: الأول -الطفل (عائم: يمين ؛ عرض: 100٪ ؛ هامش-يسار: -5 بكسل ؛) .box: بعد (المحتوى: "\ 02026" ؛ حجم الصندوق: مربع المحتوى ؛ عائم: يمين ؛ الموضع: نسبي ؛ أعلى: -25 بكسل ؛ اليسار: 100٪ ؛ العرض: 3em ؛ الهامش الأيسر: -3em ؛ المساحة المتروكة: 5 بكسل ؛ محاذاة النص: اليمين ؛ حجم الخلفية: 100٪ 100٪ ؛ الخلفية: التدرج الخطي (إلى اليمين ، rgba (255 ، 255 ، 255 ، 0) ، أبيض 50٪ ، أبيض) ؛)

هناك طريقة أخرى وهي استخدام خاصية عرض العمود التي نحدد بها عرض العمود للنص متعدد الأسطر. ومع ذلك ، عند استخدام هذه الطريقة ، لن تحصل على علامة حذف في النهاية. لغة البرمجة:

الكتلة (تجاوز: مخفي ؛ ارتفاع: 200 بكسل ؛ عرض: 300 بكسل ؛). block__inner (-webkit-عمود-عرض: 150 بكسل ؛ -moz-عمود-عرض: 150 بكسل ؛ عرض العمود: 150 بكسل ؛ ارتفاع: 100٪ ؛)

الحل الثالث للنص متعدد الأسطر في CSS هو المتصفحات Webkit... في ذلك سيتعين علينا استخدام العديد من الخصائص المحددة مع البادئة -webkit... العنصر الرئيسي هو -webkit-line-clamp ، والذي يسمح لك بتحديد عدد الخطوط المراد عرضها في كتلة. الحل جميل ولكنه محدود نوعًا ما نظرًا لعمله في مجموعة محدودة من المتصفحات

كتلة (تجاوز: مخفي ؛ تجاوز النص: قطع حذف ؛ عرض: -مجموعة ويب-صندوق ؛ -مجموعة ويب-خط-مشبك: 2 ؛ -مجموعة ويب-مربع-توجيه: عمودي ؛)

متغير جافا سكريبت للنص متعدد الأسطر

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

var block = المستند. querySelector (".block") ، نص = كتلة. innerHTML ، استنساخ = مستند. createElement ("div") ؛ استنساخ. نمط. الموضع = "مطلق" ؛ استنساخ. نمط. الرؤية = "مخفي" ؛ استنساخ. نمط. العرض = الكتلة. clientWidth + "px" ؛ استنساخ. innerHTML = نص ؛ وثيقة. هيئة. appendChild (استنساخ) ؛ var l = text. الطول - 1 ؛ من أجل (؛ l> = 0 && clone. clientHeight> block. clientHeight؛ - l) (clone. innerHTML = text. substring (0، l) + "..."؛) block. innerHTML = استنساخ. داخلي HTML ؛

هذا في شكل ملحق jQuery:

(الوظيفة ($) (var truncate = function (el) (var text = el. text ()) ، height = el. height () ، clone = el. clone () ؛ clone. css ((position: "definitely"، الرؤية: "مخفي" ، الارتفاع: "تلقائي")) ؛ el. بعد (استنساخ) ؛ var l = text. length - 1 ؛ لـ (؛ l> = 0 && clone. height ()> height؛ - l) ( استنساخ. text (text. substring (0، l) + "...")؛) el. text (clone. text ())؛ clone. remove ()؛)؛ $. fn. truncateText = function () ( إرجاع هذا. كل (وظيفة () (اقتطاع ($ (هذا)) ؛)) ؛) ؛) (jQuery)) ؛

مرحبًا بالجميع ، اسمي Anna Blok واليوم سنتحدث عن كيفية قص الصور دون استخدام برامج الرسومات.

أين يمكن أن يكون هذا في متناول يدي؟

بادئ ذي بدء ، في المواقع التي من المرجح ألا يتم فيها قص المحتوى الذي يحتوي على صور إلى أي كتلة معينة.

مثال صارخ: مدونة ووردبريس.

لنفترض أنك تريد أن يكون غلاف مقالتك 1: 1 (مربع). أفعالك:

1. تنزيل صورة مناسبة من الإنترنت ؛
2. قم بقصها في Photoshop إلى النسبة المرغوبة ؛
3. انشر مقالك.

بعد دخولك إلى الموقع ، سترى النتيجة التي توقعتها.

لكن لنفترض أنك نسيت قص صورة في Photoshop وتحميل صورة عشوائية كغلاف من الإنترنت ، فماذا سيحدث بعد ذلك ؟! هذا صحيح ، التصميم سوف ينكسر. وإذا لم تكن قد استخدمت CSS على الإطلاق ، فقد تتداخل الصورة عالية الدقة تمامًا مع عرض النص بالكامل. لذلك ، من المهم أن تكون قادرًا على قص الصور باستخدام أنماط CSS.

دعونا نلقي نظرة على المواقف المختلفة لكيفية تنفيذ ذلك ليس فقط باستخدام CSS ، ولكن أيضًا باستخدام SVG.

مثال 1

دعنا نحاول اقتصاص الصورة الموضوعة مع صورة الخلفية. لنقم بإنشاء بعض ترميز HTML

الانتقال إلى التصميم CSS. باستخدام صورة الخلفية ، أضف الصورة ، واضبط حدود صورتنا ، وقم بتوسيط الصورة باستخدام موضع الخلفية واضبط حجم الخلفية:

JPG) ؛ موضع الخلفية: مركز المركز ؛ حجم الخلفية: غطاء ؛ العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ )

كانت هذه هي الطريقة الأولى والأسهل لاقتصاص الصورة. الآن دعونا نلقي نظرة على مثال ثان.

مثال 2

لنفترض أن لدينا نفس حاوية الصندوق التي توجد بداخلها علامة img بها صورة سنقوم بتصميمها الآن.

سنضع صورتنا أيضًا في الوسط بالنسبة إلى الكائن الذي سننشئه. ونستخدم خاصية نادرًا ما تستخدم: object-fit.

Box (موضع: نسبي ؛ تجاوز: مخفي ؛ عرض: 300 بكسل ؛ ارتفاع: 300 بكسل ؛) .box img (الموضع: مطلق ؛ أعلى: 50٪ ؛ يسار: 50٪ ؛ تحويل: ترجمة (-50٪ ، - 50٪) ؛ العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ ملاءمة الكائن: غطاء ؛)

هذه هي أفضل طريقة في رأيي. إنه مثالي للتدوين إذا كنت تستخدم صورًا لمشاركاتك بنسب مختلفة جدًا.

يمكنك قراءة المزيد عن HTML و CSS هنا:

مثال 3

يمكننا أيضًا إنشاء اقتصاص للصور في الوقت الحالي إذا قمنا بإدخالها في عناصر SVG. لنأخذ الدائرة كمثال. يمكننا إنشاء SVG باستخدام العلامات. قم بإنشاء علامة svg حد بداخلها والتي ستحتوي على علامة دائرة وعلامة نمط. في علامة النمط ، اكتب علامة الصورة. في ذلك ، نحدد سمة xlink: href ونضيف صورة. سنضيف أيضًا سمات العرض والارتفاع. لكن هذا ليس كل شيء. سنحتاج إلى إضافة قيمة تعبئة. لإكمال عملنا ، سنضيف سمة saveAspectRatio مساعدة إلى علامة الصورة ، والتي ستملأ صورتنا "من وإلى" حول الدائرة.

لا أستطيع أن أسمي هذه الطريقة عالمية. لكن يمكن استخدامه في حالات استثنائية. على سبيل المثال ، إذا تطرقنا إلى موضوع مدونة ، فمن الأفضل أن تتناسب هذه الطريقة مع الصورة الرمزية للمؤلف الذي يكتب المقالة.

يمكنك قراءة المزيد عن HTML و CSS هنا:

النتائج:
لقد قمنا بتغطية 3 طرق لاقتصاص صورة على مواقع الويب: استخدام صورة الخلفية باستخدام علامة img والمرتبطة بنمط svg مع تضمين الصور النقطية باستخدام علامة الصورة. إذا كنت تعرف أي طرق أخرى لاقتصاص صورة باستخدام SVG ، فشاركها في التعليقات. سيكون من المفيد ليس فقط بالنسبة لي ، ولكن أيضًا للآخرين التعرف عليهم.

لا تنس أن تطرح أسئلة الترميز أو التطوير الأمامي للمحترفين على FrontendHelp عبر الإنترنت.

في هذه المقالة سوف نخبرك عن 3 تقنيات CSS سريعة وسهلةيمكنك استخدامه لإظهار جزء فقط من الصورة على صفحتك.

كل الطرق المستخدمة هنا تحتاج فقط إلى سطرين CSSالشفرة. ومع ذلك ، هذا ليس ختانًا بالمعنى الحرفي للكلمة ( CSSلا يمكننا فعل ذلك حتى الآن) ، نحن فقط نخفي ونعرض فقط ذلك الجزء من الصورة الذي نريد رؤيته.

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

التقنية 1 - استخدام الهوامش السلبية ( الهوامش السلبية)

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

لغة البرمجةمطابق للرمز من التقنية السابقة:

تقنية 3 - استخدام خاصية التقطيع ( مقطع الملكية)

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

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

ومع ذلك ، لا يمكن للمرء أن يترك دون ذكر خاصية التقطيع... وهكذا مرة أخرى الكود ...