Printable View
چه طور با css میشه یک متن چند خطه طولانی رو با سه نقطه ختم کرد؟
مثلا اینجوری
طوری که کلمه اخر ناقص نشهنقل قول:
يکي از راه‌هاي تحقق آموزش الکترونيک، آموزش از طريق رايانامه يا ايميل است. گرچه با پيشرفت فناوري‌هاي وب و گسترش برنامه‌هاي آنلاين اين راه آموزش رو به فراموشي مي‌رود اما همچنان در کشورهاي درحال توسعه که از نداشتن بستر مناسب اينترنت رنج مي‌برند يکي از بهترين روش‌ها است. سايت درسنامه تقريبا جزو اولين سايت‌هايي است که آموزش از طريق ايميل را به صورت[...]
معمولا این کار سمت سرور صورت می گیره - مثلا چکیده مقالات رو در نظر بگیر , در این حالت حداقل 3 فیلد داریم - آی دی مقاله 2 - چکیده مقاله با تعداد کاراکتر مشخص (مثلا 300 کاراکتر) 3 - مقاله تمام متن
اگر از ابتدا طبق سناریو بالا نرفته باشیم موقعی که اطلاعات لود میشه می تونیم تعداد 300 کاراکتر رو بگیریم و در پایانش [...] رو بذاریم . در این حالت هم ممکنه کلمه آخر ناقص بشه. چون معلوم نیست کاراکتر 300 ام در ابتدای کلمه است یا انتهای آن - لذا بهترین روش همان پذیرفتن 300 کاراکتر برای چکیده است و کارربر با توجه به محدودیت کاراکترها خودش عبارت رو بصورت صحیح تمام می کند.
این کار رو فیس بوک انجام میده، ولی فک نکنم با سی اس اس.
و مطمئنا ای جکس هم نیس، چون وقتی روی لینک کلیک می کنیم، بلافاصله ادامه اش رو میاره.
فک کنم این کار رو با جاوا اسکریپت انجام میده.
با CSS میشه اینکار رو انجام داد منتها مشکل آخر رو برطرف نمیکنه یعنی ناقص نشدن کلمه.
برای حل اون مشکل باید از JavaScript یا یک زبان سمت سرور استفاده کنید، اگر میخواید خیلی سریع اینکار رو سمت کاربر یعنی با JavaScript انجام بدید ساده ترین کاری که میشه کرد اینه که متنها رو با استفاده از کاراکتر «فاصله» (دقتش ۱۰۰٪ نیست ولی میشه به همین اکتفا کرد) از هم جدا کنیم به هر تعدادی که مد نظرتون بود و بعد آخرین کلمه رو واکشی و به اون سه نقطه رو اضافه کنید.کد:.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}