8 تير 1396
7 ۱,۵۰۰ 3

آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت

امیر محمد دینی
Place three dots for very long text - آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت

با درود خدمت کاربران عزیز پروان وب !

شاید در خیلی از سایت دیده باشین وقتی متنی از یه کارکتری بیشتر میشه ، خودکار سه تا نقطه ( . . . ) برای ادامه مطلب و نشون دادن اینکه اقا این مطلب ادامه هم داره استفاده میشه !!! برای اینکار ما نیاز به آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت داریم 🙂

مام امروز قصد داریم تا این کد رو برای شما با استفاده از CSS3 بذاریم که براحتی بتونین با اون تعریف کنین که اگر متن ما از فلان قدر بیشتر شد بقیه اش رو   سه تا نقطه ( . . . ) بزن ! پس با آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت از وب سایت پروان وب همراه ما باشید !!

آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت

شما به طور مثال کد زیر رو در نظر بگیرین :

<div class=”parvanweb”>پروان وب</div>

این یک کد html هست که ادامه ادامه با css ترکیبش میکنیم !!

حال css زیر را به کدهای css خود اضافه کنید. :

.parvanweb{

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

به همین راحتی ولی خب چند نکته هست که براتون در پایین ذکر میکنم :

  1. به جای تگ div در html میتونین هر تگ نوشتاری دیگه مثله h1,h2,h3,h4,p,span. و . . . استفاده کنین
  2. تگی که نوشته درون آن قرار می گیرد حتما باید width داشته باشد به طور مثال width:100px این کار برای آن است که اگر نوشته از 100px بیشتر شود به سه نقطه  محدود شود.
  3. به تگی که در آن نوشته قرار دارد می توانید برای دیزاین  css های دلخواه خودتان را اضافه نمایید.

خب این آموزش هم خیلی ریز به پایان رسید ، هرگونه سوالی بود بنده در قسمت نظرات در خدمتم

یاعلی

3/5 - (2 امتیاز)
امیر محمد دینی

نویسنده وبسایت پروان وب

ثبت نظر جدید

ایمیل شما منتشر نخواهد شد.فیلدهای مورد نیاز علامت گذاری شده اند

لیست نظرات

  1. دستتون درد نکنه بسیار کاربردی بود

    • امیر محمد دینی

      خواهش میکنم
      وظیفه اس …

  2. سلام ممنونم واقعا عالی بود
    من در کسب و کارم کوتاه کننده لینک استفاده نمودم با تشکر

  3. مطلبتون عالی بود خیلی ممنون

  4. سلام
    مطالب خوبی به اشتراک گذاشتید
    موفق باشید

  5. ثیقفثص

    کپی و بدرد نخور

محصول مورد نظر با موفقیت به سبد خرید اضافه شد.