css - tutorials - html code



CSS: دس بعض النص دون تغيير حجم حاويته (7)

لدي قائمة تنقل أفقية ، وهي في الأساس مجرد <ul> مع تعيين العناصر جنبًا إلى جنب. لا أعرِّف العرض ، ولكن استخدم ببساطة الحشو ، لأنني أرغب في تحديد العرض بعرض عنصر القائمة. أنا جريئة البند المحدد حاليا.

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

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

https://ffff65535.com


أفضل حل يعمل باستخدام :: after

HTML

<li title="EXAMPLE TEXT">
  EXAMPLE TEXT
</li>

CSS

li::after {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

وتضيف عنصرًا زائفًا غير مرئي مع عرض النص الغامق ، والذي يتم الحصول عليه من خلال سمة title .

يبدو حل text-shadow غير طبيعي على Mac ولا يستخدم كل الجمال الذي يقدمه النص على Mac .. :)

http://jsfiddle.net/85LbG/

الائتمان: https://.com/a/20249560/5061744


استخدم جافا سكريبت لتعيين عرض ثابت للعلامة li استنادًا إلى المحتوى غير المموَّه ، ثم أدخل المحتوى بخط غامق عن طريق تطبيق نمط على العلامة <a> (أو أضف امتدادًا إذا لم يكن لدى <li> أي أطفال).


سؤال مهم. أفترض أنك تستخدم تعويم ، أليس كذلك؟

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

إن الحل الفريد الذي أعرفه لتجنب هذا التغيير هو أحد ما قلته أنك لا تريده: تحديد أحجام ثابتة إلى li.


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

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


للحصول على إجابة حديثة ، يمكنك استخدام -webkit-text-stroke-width :

.element {
  font-weight: normal;
}

.element:hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

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

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

هذا بالتأكيد يعمل في أحدث إصدارات Edge و Firefox و Chrome و Opera. أفترض أنه يعمل في سفاري (أوبرا عادة ما يكون بارومتر جيد من ذلك) على الرغم من أنني لم تختبره على سفاري. لا يعمل في IE11 أو أقل.

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


هذا ينقح ويظهر أمثلة من إجابة Alexxali's باستخدام Alexxali's وحياتي الخاصة:

  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

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

تحذير: تدعم قيم px القيم العشرية ، ولكنها لن تبدو رائعة عندما يتغير حجم الخط (على سبيل المثال ، يقوم المستخدم بقياس مستوى العرض باستخدام Ctrl + + ). استخدم القيم النسبية بدلاً من ذلك.

تستخدم هذه الإجابة أجزاء من الوحدات ex نظرًا لأنها تتناغم مع الخط.
في معظم ~ افتراضيات المتصفح * ، توقع 1ex8px وبالتالي 0.025ex0.1px .

يمكنك حتى اختيار أوزان جريئة متفاوتة مع خاصية text-shadow بشكل أكثر دقة من font-weight . انظر بنفسك:

li       { color: #000; } /* set text color just in case */
.tsbold0 { text-shadow: inherit; }
.tsbold1 { text-shadow: -0.01ex 0 #000, 0.01ex 0 #000; }
.tsbold2 { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.tsbold3 { text-shadow: -0.03ex 0 #000, 0.03ex 0 #000; }
.tsbold4 { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.tsbold5 { text-shadow: -0.05ex 0 #000, 0.05ex 0 #000; }
.tsbold6 { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.tsbold7 { text-shadow: -0.07ex 0 #000, 0.07ex 0 #000; }
.tsbold8 { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.tsbold9 { text-shadow: -0.09ex 0 #000, 0.09ex 0 #000; }
.bold    { font-weight: bold; }
.bolder  { font-weight: bolder; }
.ltrsp   { letter-spacing:0; font-weight:bold; } /* via Matthew Foscarini */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover { font-weight: normal!important; text-shadow: none!important; }
<li class="tsbold0">MmmIii123 This line tests tsbold0 (plain)</li>
<li class="tsbold1">MmmIii123 This line tests tsbold1 (0.01ex)</li>
<li class="tsbold2">MmmIii123 This line tests tsbold2 (0.02ex)</li>
<li class="tsbold3">MmmIii123 This line tests tsbold3 (0.03ex)</li>
<li class="tsbold4">MmmIii123 This line tests tsbold4 (0.04ex)</li>
<li class="tsbold5">MmmIii123 This line tests tsbold5 (0.05ex)</li>
<li class="tsbold6">MmmIii123 This line tests tsbold6 (0.06ex)</li>
<li class="tsbold7">MmmIii123 This line tests tsbold7 (0.07ex)</li>
<li class="tsbold8">MmmIii123 This line tests tsbold8 (0.08ex)</li>
<li class="tsbold9">MmmIii123 This line tests tsbold9 (0.09ex)</li>
<li class="ltrsp"  >MmmIii123 This line tests ltrsp (@Matthew Foscarini)</li>
<li class="bold"   >MmmIii123 This line tests bold</li>
<li class="bolder" >MmmIii123 This line tests bolder</li>
<li class="tsbold1 bold">MmmIii123 This line tests tsbold1 (0.01ex) + bold</li>
<li class="tsbold2 bold">MmmIii123 This line tests tsbold2 (0.02ex) + bold</li>
<li class="tsbold3 bold">MmmIii123 This line tests tsbold3 (0.03ex) + bold</li>
<li class="tsbold4 bold">MmmIii123 This line tests tsbold4 (0.04ex) + bold</li>
<li class="tsbold5 bold">MmmIii123 This line tests tsbold5 (0.05ex) + bold</li>
<li class="tsbold6 bold">MmmIii123 This line tests tsbold6 (0.06ex) + bold</li>
<li class="tsbold7 bold">MmmIii123 This line tests tsbold7 (0.07ex) + bold</li>
<li class="tsbold8 bold">MmmIii123 This line tests tsbold8 (0.08ex) + bold</li>
<li class="tsbold9 bold">MmmIii123 This line tests tsbold9 (0.09ex) + bold</li>

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

عدّل مستوى التكبير في متصفحك ( Ctrl + + و Ctrl + - ) لمعرفة كيف تختلف.


يمكنك تنفيذ هذه القائمة مثل amazon.com "تسوق حسب القسم". ويستخدم div واسعة. يمكنك إنشاء قسم واسع وإخفاء الجزء الصحيح





menu