رفتن به مطلب

محدود کردن متن با css


پست های پیشنهاد شده

با سلام

می خواستم قالب زیر رو که psd هست 

قسمتی که در عکس مشخصه به html تبدیل کنم ولی یم مشکلی هست

از من خواسته شده تا در خط اول مثل عکس کاربر فقط بتونه یه تعداد خاصی کلمه وارد کنه و در خط دوم هم یه تعداد خاص دیگه 

و کل این دوخط داخل یه div قرار داره 

ممنون میشم اگر کسی بتونه کمک کنه

عکس پیوست شده

2.jpg

لینک به ارسال

سلام

باید با یک فانکشن کوتاه کننده متن استفاده کنین تا متن های ورودی رو به تعداد کاراکتر مشخص شده محدود کنه .

اینم فانکشن مورد نظر

function sub_text($char,$text) {
	$title = $text;
	$title = mb_substr($title,0,$char);
	if(mb_strlen($title)<$char){
		$dotstree = "";
	}else{
		$dotstree = "...";
	}
	echo $title,$dotstree;
}

که برای اجرا هم به این صورت که ورودی اول به صورت متن یا متغییر و ورودی دوم تعداد کاراکتر

<?php sub_text('matn morede nazar',30); ?>
or
<?php sub_text($title,30); ?>

همینطور برای گرفتن مقدار داخل تابع هم میتونین به جای echo متغیر رو return کنید

لینک به ارسال

با تشکر

ولی این قالب برای وردپرس نیست و من اصن به عنوان طراح قالب نمی دونم باید این کار رو انجام بدم یا نه ؟
راهی هستش که با css انجام بشه؟؟؟؟

ممنون از راهنمایی اتون

ویرایش شده توسط loveali
لینک به ارسال
در 2 ساعت قبل، alitna گفته است :

سلام

باید با یک فانکشن کوتاه کننده متن استفاده کنین تا متن های ورودی رو به تعداد کاراکتر مشخص شده محدود کنه .

اینم فانکشن مورد نظر


function sub_text($char,$text) {
	$title = $text;
	$title = mb_substr($title,0,$char);
	if(mb_strlen($title)<$char){
		$dotstree = "";
	}else{
		$dotstree = "...";
	}
	echo $title,$dotstree;
}

که برای اجرا هم به این صورت که ورودی اول به صورت متن یا متغییر و ورودی دوم تعداد کاراکتر


<?php sub_text('matn morede nazar',30); ?>
or
<?php sub_text($title,30); ?>

همینطور برای گرفتن مقدار داخل تابع هم میتونین به جای echo متغیر رو return کنید

من می خواستم تو یک div مثلا خط اول 7 تا کلمه 

خط دوم 20 کلمه باشه 

تشکر

لینک به ارسال

ببخشید متوجه موضوع نشدم گفتین با css

با css میشه اینکار رو تا حدی انجام داد ولی بعضی وقتا ممکنه وسط متن یکدفه متن نصفش معلوم بشه و نصفیش نشه ..

کلا با css میتونین محدوده قرارگیری متن رو محدود کنین و خاصیت overflow hidden رو بهش بدین .

ولی در کل با css تا اونجایی که میدونم نمیشه ..

لینک به ارسال
  • 2 ماه بعد...

سلام

با css نمیشه اینکار رو انجام داد

کد js بصورت زیر میشه : 

      var totalCharacter = 200; 
      var charactersUsed = $("نام کلاس یا آیدی").text().length; 
      if(charactersUsed > totalCharacter){
          charactersUsed = totalCharacter;
          $("نام کلاس یا آیدی").text($("نام کلاس یا آیدی").text().substr(0, totalCharacter));
      }

 

لینک به ارسال
  • 3 سال بعد...

اصلا با css نمیشه ولی با js کد های زیادی داره داخل مرورگر سرچ کنی کد های مختلفی هست که میتونی استفاده کنی

لینک به ارسال
  • 1 سال بعد...

سلام بنده از طریق ووکامرس در صفحه محصولاتم متغیر ویژگی ایجاد کردم که کاربر قبل از خرید یک مدل گارانتی رو انتخاب کنه

متن ویژگی ای که در نظر گرفتم و در سلکت باکس میاد یکم طولانیه

میخام محدودیت تعداد کارکتر بهش بدم که تا کاربر اون فیلد سلکت باکس رو باز نکنه کامل دیده نشه و ظاهر اون قسمت به هم نریزه

بنظر میاد از طریق js امکان پذیر باشه ولی من تسلطی روی برنامه نویسی ندارم

چه کاری باید انجام بدم ؟

لینک به ارسال
در در ۱۳۹۹/۸/۱۰ در 13:12، amirali ghorbani گفته است :

اصلا با css نمیشه ولی با js کد های زیادی داره داخل مرورگر سرچ کنی کد های مختلفی هست که میتونی استفاده کنی

سلام بنده از طریق ووکامرس در صفحه محصولاتم متغیر ویژگی ایجاد کردم که کاربر قبل از خرید یک مدل گارانتی رو انتخاب کنه

متن ویژگی ای که در نظر گرفتم و در سلکت باکس میاد یکم طولانیه

میخام محدودیت تعداد کارکتر بهش بدم که تا کاربر اون فیلد سلکت باکس رو باز نکنه کامل دیده نشه و ظاهر اون قسمت به هم نریزه

بنظر میاد از طریق js امکان پذیر باشه ولی من تسلطی روی برنامه نویسی ندارم

چه کاری باید انجام بدم ؟

لینک به ارسال

سلام راههای زیادی داره از طریق css هم میشه

.yourclass{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}

max-width رو به مقدار دلخواه تغییر بده

میتونی بر اساس خط هم تنظیم کنه که نهایتا 1 خط 2 خط و یا 3 خط باشه

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...