امیر محمد دینی 
با درود خدمت کاربران عزیز پروان وب !
شاید در خیلی از سایت دیده باشین وقتی متنی از یه کارکتری بیشتر میشه ، خودکار سه تا نقطه ( . . . ) برای ادامه مطلب و نشون دادن اینکه اقا این مطلب ادامه هم داره استفاده میشه !!! برای اینکار ما نیاز به آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت داریم 🙂
مام امروز قصد داریم تا این کد رو برای شما با استفاده از CSS3 بذاریم که براحتی بتونین با اون تعریف کنین که اگر متن ما از فلان قدر بیشتر شد بقیه اش رو سه تا نقطه ( . . . ) بزن ! پس با آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت از وب سایت پروان وب همراه ما باشید !!
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
شما به طور مثال کد زیر رو در نظر بگیرین :
<div class=”parvanweb”>پروان وب</div>
این یک کد html هست که ادامه ادامه با css ترکیبش میکنیم !!
حال css زیر را به کدهای css خود اضافه کنید. :
.parvanweb{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
به همین راحتی ولی خب چند نکته هست که براتون در پایین ذکر میکنم :
- به جای تگ div در html میتونین هر تگ نوشتاری دیگه مثله h1,h2,h3,h4,p,span. و . . . استفاده کنین
- تگی که نوشته درون آن قرار می گیرد حتما باید width داشته باشد به طور مثال width:100px این کار برای آن است که اگر نوشته از 100px بیشتر شود به سه نقطه محدود شود.
- به تگی که در آن نوشته قرار دارد می توانید برای دیزاین css های دلخواه خودتان را اضافه نمایید.
خب این آموزش هم خیلی ریز به پایان رسید ، هرگونه سوالی بود بنده در قسمت نظرات در خدمتم
یاعلی
نویسنده وبسایت پروان وب
ثبت نظر جدید
لیست نظرات
-
چگونه از غول های فارسی بک لینک رایگان بگیریم ؟!!!
15 فروردين 140418 1,287 0 -
افزونه پنل کاربری حرفه ای و بهترین افزونه ثبت نام وردپرس MemberShip Pro درگاه زرین پال
12 شهريور 139915 5,315 5 -
افزایش سرعت بارگذاری – بهترین افزونه های کش وردپرس
20 آذر 139314 305 0 -
دانلود افزونه Gravity Forms : ساخت انواع فرم های وردپرس
27 آذر 139313 395 0 -
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
8 تير 13969 1,769 3 -
معرفی و مقایسه 7 افزونه مشاور املاک وردپرس – ساخت سایت املاک وردپرس
2 ارديبهشت 13979 2,931 5 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکه‌های اجتماعی
1 ارديبهشت 14049 3,502 0 -
آموزش افزونه حتما بخوانید وردپرس
25 بهمن 13958 385 5
-
غیرفعال کردن بلوک های گوتنبرگ وردپرس + شخصی سازی
17 ارديبهشت 14040 15 0 -
25 افزونه وردپرس فرم ساز حرفه ای + مقایسه + پادکست صوتی
16 ارديبهشت 14044 10,597 5 -
راهنمای جامع شورت‌کدهای ووکامرس + چیت شیت ووکامرس + پادکست صوتی
14 ارديبهشت 14040 70 0 -
افزونه اپلیکیشن ساز برای وردپرس
13 ارديبهشت 14041 3,193 5 -
آموزش نمایش جزئیات سفارشات ووکامرس + پادکست صوتی
13 ارديبهشت 14040 71 5 -
آموزش کامل سفارشی سازی ایمیل های سفارشات ووکامرس + پادکست صوتی
11 ارديبهشت 14040 65 5 -
چک لیست نگهداری وردپرس: چه کارهایی باید انجام دهید و چه زمانی؟ + پادکست صوتی
10 ارديبهشت 14040 35 5 -
بهترین افزونه‌های آمارگیر سایت وردپرس + مقایسه ویژگی ها
9 ارديبهشت 14040 27 0
تبلیغات متنی
به این مطالب نیز شاید علاقه مند باشید ...
مطالب مشابه
غیرفعال کردن بلوک های گوتنبرگ وردپرس + شخصی سازی
ویرایشگر گوتنبرگ (Gutenberg) وردپرس ابزاری قدرتمند برای ساخت محتوا به کمک بلوک‌هاست، اما گاهی لازم است برخی بلوک‌ها را مدیریت یا محدود کنید. ممکن است بخواهید هنگام طراحی سایت برای یک مشتری، استفاده از برخی بلوک‌های خاص را محدود کنید یا با حذف بلوک‌های غیرضروری، ویرایشگر را ساده‌تر کنید. در این راهنما، روش‌های مختلف برای […]
سیدعلی سعادت
25 افزونه وردپرس فرم ساز حرفه ای + مقایسه + پادکست صوتی
قبل از شروع مقاله ، اگه حوصله یا فرصت مطالعه این مقاله رو ندارید ، پیشنهاد می کنیم پادکست صوتی زیر که با ابزار هوش مصنوعی (گوگل notebooklm ) به زبان فارسی توسط تیم پروان وب تولید شده است ، گوش کنید. اگر به دنبال ایجاد فرم تماس یا ثبت‌نام در سایت وردپرس خود هستید، احتمالاً […]
سیدعلی سعادت
راهنمای جامع شورت‌کدهای ووکامرس + چیت شیت ووکامرس + پادکست صوتی
خلاصه صوتی و چیت شیت(Cheat Sheet) کدهای کوتاه ووکامرس قبل از شروع مقاله ، اگه حوصله یا فرصت مطالعه این مقاله رو ندارید ، پیشنهاد می کنیم پادکست صوتی زیر که با ابزار هوش مصنوعی (گوگل notebooklm ) به زبان فارسی توسط تیم پروان وب تولید شده است ، گوش کنید. جدول راهنمای کامل کدهای […]
سیدعلی سعادت
افزونه اپلیکیشن ساز برای وردپرس
تبدیل سایت وردپرس به اپلیکیشن موبایل با افزونه AppPresser اگر به دنبال راهی برای تبدیل سایت وردپرس به اپلیکیشن موبایل هستید، یکی از بهترین گزینه‌ها استفاده از افزونه AppPresser است. این افزونه یکی از محبوب‌ترین ابزارها برای تبدیل سایت وردپرسی به اپلیکیشن است و به شما کمک می‌کند تا یک اپلیکیشن ساده و کارآمد برای […]
سیدعلی سعادت
دستتون درد نکنه بسیار کاربردی بود
خواهش میکنم
وظیفه اس …
سلام ممنونم واقعا عالی بود
من در کسب و کارم کوتاه کننده لینک استفاده نمودم با تشکر
مطلبتون عالی بود خیلی ممنون
خواهش میکنم ، موفق باشید
سلام
مطالب خوبی به اشتراک گذاشتید
موفق باشید
کپی و بدرد نخور
درود بر شما چطوری میشه وقتی کاربر روی 3 نقطه کلیک کرد بقیه متن بیاد؟
باسلام
با جاوااسکریپت باید اینکار انجام بشه