امیر محمد دینی 
با درود خدمت کاربران عزیز پروان وب !
شاید در خیلی از سایت دیده باشین وقتی متنی از یه کارکتری بیشتر میشه ، خودکار سه تا نقطه ( . . . ) برای ادامه مطلب و نشون دادن اینکه اقا این مطلب ادامه هم داره استفاده میشه !!! برای اینکار ما نیاز به آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت داریم 🙂
مام امروز قصد داریم تا این کد رو برای شما با استفاده از 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,290 0 -
افزونه پنل کاربری حرفه ای و بهترین افزونه ثبت نام وردپرس MemberShip Pro درگاه زرین پال
12 شهريور 139915 5,319 5 -
افزایش سرعت بارگذاری – بهترین افزونه های کش وردپرس
20 آذر 139314 307 0 -
دانلود افزونه Gravity Forms : ساخت انواع فرم های وردپرس
27 آذر 139313 397 0 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکه‌های اجتماعی
1 ارديبهشت 14049 3,511 0 -
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
8 تير 13969 1,775 3 -
معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس
21 ارديبهشت 14049 2,957 4.8 -
آموزش افزونه حتما بخوانید وردپرس
25 بهمن 13958 387 5
-
نشانه‌گذاری اسکیما چیست و چه تاثیری در نتایج جستجو دارد؟
25 ارديبهشت 14040 13 4 -
چگونه بدون از دست دادن اطلاعات، نسخه ووکامرس را به نسخه قبلی برگردانیم؟
25 ارديبهشت 14040 22 0 -
۸ تا از بهترین افزونه‌های لیست علاقه‌مندی ووکامرس برای فروشگاه‌های وردپرسی
24 ارديبهشت 14040 17 0 -
نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور
23 ارديبهشت 14040 15 0 -
آموزش تنظیمات مالیات در ووکامرس (راهنمای کامل)
23 ارديبهشت 14040 15 0 -
افزایش سرعت سایت با افزونه jetpack وردپرس + آموزش
21 ارديبهشت 14040 463 0 -
معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس
21 ارديبهشت 14049 2,957 4.8 -
آموزش پاکسازی وردپرس | شناسایی کد های مخرب و بد افزار
20 ارديبهشت 14041 1,006 5
تبلیغات متنی
به این مطالب نیز شاید علاقه مند باشید ...
مطالب مشابه
نشانه‌گذاری اسکیما چیست و چه تاثیری در نتایج جستجو دارد؟
نشانه‌گذاری اسکیما (Schema Markup) نوعی داده ساختاریافته است که به زبان ساده به موتورهای جستجو کمک می‌کند تا بهتر متوجه شوند محتوای هر صفحه وب درباره چیست. این داده‌ها مستقیماً به کدهای HTML سایت اضافه می‌شوند و اطلاعات دقیق‌تری درباره عناصر مختلف صفحه ارائه می‌دهند؛ مانند معرفی افراد، سازمان‌ها، محصولات، رویدادها و حتی فیلم‌ها. در […]
سیدعلی سعادت
چگونه بدون از دست دادن اطلاعات، نسخه ووکامرس را به نسخه قبلی برگردانیم؟
آیا به دنبال روشی ساده برای تغییر نسخه ووکامرس بدون از بین رفتن داده‌ها هستید؟ اگر پس از به‌روزرسانی ووکامرس با مشکلاتی مواجه شده‌اید، دانگرید کردن به نسخه قبلی می‌تواند فروشگاه آنلاین شما را به وضعیت پایدار برگرداند. در این بخش از آموزش کامل بازگردانی وردپرس به نسخه قبلی، سه روش کاربردی برای بازگشت به […]
سیدعلی سعادت
۸ تا از بهترین افزونه‌های لیست علاقه‌مندی ووکامرس برای فروشگاه‌های وردپرسی
اگر فروشگاه اینترنتی شما بر پایه ووکامرس ساخته شده، احتمالاً به دنبال راهی هستید تا تجربه خرید کاربران را جذاب‌تر کنید و بازگشت آن‌ها به سایت را افزایش دهید. یکی از ساده‌ترین و مؤثرترین روش‌ها برای این کار، استفاده از افزونه لیست علاقه‌مندی است. با استفاده از افزونه علاقه مندی ووکامرس برای سایت های وردپرسی، […]
سیدعلی سعادت
نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور
در این مقاله، قصد داریم با رویکردی پروژه‌محور، نحوه طراحی قالب وردپرس با استفاده از React را آموزش دهیم. ادغام قدرت رابط کاربری React با سیستم مدیریت محتوای وردپرس، امکانی فراهم می‌کند تا قالب‌هایی سریع، مدرن و تعاملی طراحی کنید. این راهنما به شما کمک می‌کند تا با استفاده از ابزارهای مدرن، یک قالب وردپرس […]
سیدعلی سعادت
دستتون درد نکنه بسیار کاربردی بود
خواهش میکنم
وظیفه اس …
سلام ممنونم واقعا عالی بود
من در کسب و کارم کوتاه کننده لینک استفاده نمودم با تشکر
مطلبتون عالی بود خیلی ممنون
خواهش میکنم ، موفق باشید
سلام
مطالب خوبی به اشتراک گذاشتید
موفق باشید
کپی و بدرد نخور
درود بر شما چطوری میشه وقتی کاربر روی 3 نقطه کلیک کرد بقیه متن بیاد؟
باسلام
با جاوااسکریپت باید اینکار انجام بشه