كيفية اخفاء text أو عنصر Html باستخدام تنسيقات css

يمكنك إخفاء العنصر من خلال خاصية visibility كالتالي:

h1 {
  visibility: hidden;
}

سيظل مكان النص موجود ولكن فارغ، وإن أردتِ حذف النص ومكانه أيضًا نستخدم خاصية display كالتالي:

h1 {
  display: none;
}

هناك عدة طرق لاخفاء النص أو العنصر, سوف أقوم بشرح بعضها
بداية لدينا عنصر p في كود html

<p>نص مخفي</p>

الطريقة الاولى لاخفائه كالتالي

p{
	visibility:hidden
}

قمنا بإعطاء العنصر خاصية visibility ومعناها باللغة العربية "الظهور" وقمنا باسناد القيمة hidden والتي معناها بالعربية اخفاء
الطريقة الثانية كالآتي

p{
	display: none;
}

قمنا بإعطاء العنصر خاصية display وأسندنا القيمة none لها أي لن يظهر العنصر
الطريقة الثالثة من الممكن أن نقوم باعطاء العنصر صنف فليكن اسم الصنف hiddentext فيكون الكود كالتالي

<p class="hiddentext">نص مخفي</p>

ونقوم باعطاء الصنف بعض التنسيقات التي تجعله لا يظهر مثل أن نقوم بتغير مكان العنصر ,كالتالي

.hiddentext
{
	position: absolute
	top: 0px;
	left: -5000px;
}

قمنا بتغيير موضع العنصر وحددنا مكانه بالنسبة للشاشة من اتجاه الشمال ومن اتجاه الأعلى, سوف يتغير موضع العنصر وسوف يصبح غير ظاهر

يمكنك إعطاء العنصر خاصية display بحيث تخفي العنصر والنص 

<h1 id="h1">Text</h1>

و التنسيق الخاص به يكون 

h1{
display: none;
}

أو عن طريق javascript يمكنك وضع 

document.getElementById("h1").innerHTML = "";

أو من خلال jquery 

$(function(){
$("#h1").html("");
});	

أسهل طريقة لعمل ذلك سيكون بواسطة ال javascript  عن طريق التعديل على ال css كالتالي 

e.style.display = 'none'; //عبارة عن العنصر المطلوب إخفائه e  ال

أو 

e.innerHtml = ''; //عبارة عن العنصر المطلوب إخفائه e  ال

وكمثال على ذلك يمكننا عمل زر لإخفاء عنصر وإظهاره كالتالي

<a href="#" onclick="toggle_visibility('foo');">Click here</a>
<span id="foo">This is foo</span>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

هذه أبسط طريقة وتوجد العديد من الطرق الأخرى سواء بال jquery أو بال css فقط ولكن ستختلف على الطريقة التي تريد العنصر أن يختفي بها

بتاريخ On 5/23/2021 at 11:17 قال محمد أبو عواد:

هناك عدة طرق لاخفاء النص أو العنصر, سوف أقوم بشرح بعضها
بداية لدينا عنصر p في كود html

<p>نص مخفي</p>

الطريقة الاولى لاخفائه كالتالي

p{
	visibility:hidden
}

قمنا بإعطاء العنصر خاصية visibility ومعناها باللغة العربية "الظهور" وقمنا باسناد القيمة hidden والتي معناها بالعربية اخفاء
الطريقة الثانية كالآتي

p{
	display: none;
}

قمنا بإعطاء العنصر خاصية display وأسندنا القيمة none لها أي لن يظهر العنصر
الطريقة الثالثة من الممكن أن نقوم باعطاء العنصر صنف فليكن اسم الصنف hiddentext فيكون الكود كالتالي

<p class="hiddentext">نص مخفي</p>

ونقوم باعطاء الصنف بعض التنسيقات التي تجعله لا يظهر مثل أن نقوم بتغير مكان العنصر ,كالتالي

.hiddentext
{
	position: absolute
	top: 0px;
	left: -5000px;
}

قمنا بتغيير موضع العنصر وحددنا مكانه بالنسبة للشاشة من اتجاه الشمال ومن اتجاه الأعلى, سوف يتغير موضع العنصر وسوف يصبح غير ظاهر

نعم سيصبح النص غير ظاهر ولاكن سيختفي معه ال bakeground -color and the , padding, color 

انا اريد ان يختفي الtext  ولاكن التنسيقات التي وضعتها له لاتختفي واريد استبدل الtext  بعباره اخرى

فكرتي هنا اني لايمكنني تعديل التنسيقات الموجوده على صفحه html والتي وضعت فيها التنسيقات 

لايمككنني ذلك الى عن طريقه صفحه الcss 

بتاريخ الآن قال Rehab Essam:

نعم سيصبح النص غير ظاهر ولاكن سيختفي معه ال bakeground -color and the , padding, color 

انا اريد ان يختفي الtext  ولاكن التنسيقات التي وضعتها له لاتختفي واريد استبدل الtext  بعباره اخرى 

يمكنك النظر إلى هذه الإجابة , لفعل ذلك يجب عليك استخدام jquery. 

بتاريخ On 23‏/5‏/2021 at 12:18 قال بلال زيادة:

يمكنك إعطاء العنصر خاصية display بحيث تخفي العنصر والنص 

<h1 id="h1">Text</h1>

و التنسيق الخاص به يكون 

h1{
display: none;
}

أو عن طريق javascript يمكنك وضع 

document.getElementById("h1").innerHTML = "";

أو من خلال jquery 

$(function(){
$("#h1").html("");
});	

 

بتاريخ 2 دقائق مضت قال بلال زيادة:

يمكنك النظر إلى هذه الإجابة , لفعل ذلك يجب عليك استخدام jquery. 

 

حقيقه اني لم ادرس الى الان غير الhtml and css فهل يوجد طريقه اخرى 

بتاريخ الآن قال Rehab Essam:

حقيقه اني لم ادرس الى الان غير الhtml and css فهل يوجد طريقه اخرى 

يفضل استخدام jQuery ولكن ربما هذه الطريقة تنفع معك 

<h1 id="h1"><span class="text">Text</span></h1>


h1 .text{
	display: none;
}

h1:after{
	content: "My New Text";
}

لاحظي في خاصية content قمنا بإضافة النص 

content: "My New Text";

بتاريخ 13 دقائق مضت قال بلال زيادة:

يفضل استخدام jQuery ولكن ربما هذه الطريقة تنفع معك 

<h1 id="h1"><span class="text">Text</span></h1>


h1 .text{
	display: none;
}

h1:after{
	content: "My New Text";
}

لاحظي في خاصية content قمنا بإضافة النص 

content: "My New Text";

 

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  Hello Div
</div>

وهذا تعديلي

div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
  display: none;
}

div::after {
  content: "rehab";
  
}

ولاكنه اختفى تماما
 

بتاريخ 4 دقائق مضت قال Rehab Essam:

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  Hello Div
</div>

وهذا تعديلي

div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
  display: none;
}

div::after {
  content: "rehab";
  
}

ولاكنه اختفى تماما
 

يجب إضافة النص داخل وسم span بهذا الشكل 

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  <span class="text">Hello Div</span>
</div>

ثم نقوم بإخفاء العنصر span بهذا الشكل 

div .text{
	display: none;
}

ونحذف التنسيق التالي 

display: none;

من التنسيق التالي 

div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}

فيكون كامل التنسيقات بهذا الشكل 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div .text{
	display: none;
}
div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}

div::after {
  content: "rehab";
  
}
</style>
</head>
<body>

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  <span class="text">Hello Div</span>
</div>

</body>
</html>

تجعل

font-size: 0 

بتاريخ On 5/23/2021 at 11:11 قال Rehab Essam:

كيف يمكنني إخفاء TEXT داخل عنصر بدون اللجوء الى تعديله في صفحه HTML

    color: transparent !important;

وكيف يمكنني استبدال النص المخفي 

بتاريخ On 23‏/5‏/2021 at 11:11 قال Rehab Essam:

انا اريد أنا أكتب ف هذا ال txt كود خصم نمشي مخفية ع تويتر 

بتاريخ On 5/23/2021 at 11:11 قال Rehab Essam:

كيف يمكنني إخفاء TEXT داخل عنصر بدون اللجوء الى تعديله في صفحه HTML

الامر بسيط بتوحيد لون ال text  بلون الخلفية 

 او نستخدم خاصية text-indent

#تكليفات الزيرو 

اولا كود ال HTML

<div class="two" style="
        background-color: red;
        color: white;
        padding: 20px;
        border: 1px solid blue;
        font-size: 80px;">
        Hello Div
    </div>

لاحظ لا يمكن الوصول او التعديل علي كود ال html

.two{
    width: 400px  !important;
    margin: 30px auto  !important;
    color: #eee !important;                  /*  or تم توحيد اللون هنا بلون لون النص الخلفية */
    >>>/* text-indent: -2000px; */                /*  ونطلعها برا الصفحة خالص text-indent  او نستخدم خاصية*/
    font-size: 20px  !important;
    background-color: #eee  !important;   /*  بلون الخلفية هنا  */
    border: none  !important;
    text-align: center; 
    position: relative;
}

.two::after{
    content: "Elzero";
    position: absolute;
    top: 18px;
    left: 196px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: black;
    text-align: center;
}

   الرد متاخر بس عشان لو حد بيتعلم وسال نفس السوال 

بالتوفيق

font-size:0px;

او عمل في الdiv الذي يوجد به النص

color:transparent;

ثم في ::after او before

color:black;

والطريقة الاولى افضل 

font-size:0px;

او عمل في الdiv الذي يوجد به النص

color:transparent;

ثم في ::after او before

color:black;

والطريقة الاولى افضل 

color: transparent !important

سؤال حضرتك بخصوص تكليف الزيرو رقم 42/45

وهذا كود الحل

ويمكنك الاطلاع على باقى حل التكاليف من خلال هذا الرابط

https://codepen.io/mharby/pen/xxaXvwN

يمكن اخفاء النص من خلال اعطاءه لون يكون نفس لون الخلفيه

div {
    width: 400px;
    margin: 50px auto;
    font-size: 20px !important;
    background-color: #eee !important;
    color: #eee !important;
    border: 1px solid #eee !important;
    position: relative;
}

div::after {

    content: "Elzero";

    color: black;

    text-align: center !important;

    position: absolute;

    font-size: 20px !important;

    left: 185px;
}

بتاريخ On 8‏/3‏/2023 at 22:25 قال Mohamed Harby2:

سؤال حضرتك بخصوص تكليف الزيرو رقم 42/45

وهذا كود الحل

ويمكنك الاطلاع على باقى حل التكاليف من خلال هذا الرابط

https://codepen.io/mharby/pen/xxaXvwN

يمكن اخفاء النص من خلال اعطاءه لون يكون نفس لون الخلفيه

div {
    width: 400px;
    margin: 50px auto;
    font-size: 20px !important;
    background-color: #eee !important;
    color: #eee !important;
    border: 1px solid #eee !important;
    position: relative;
}

div::after {

    content: "Elzero";

    color: black;

    text-align: center !important;

    position: absolute;

    font-size: 20px !important;

    left: 185px;
}

ضيف دي فى ال div  و بس كده 

    content :none;

div{
    width: 400px;
    background-color: #eee !important;
    border: none !important;
    font-size: 0 !important;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
}
div::before{
    content: "Elzero";
    font-size: 20px !important;
    color: black;
    font-weight: bold;
}

الافضل تديله font size 0px عشان الtext يختفي خالص