https://virgool.ir/feed/@aryanmoradi74fa2026-11-11 14:54:56https://files.virgool.ir/upload/users/257452/avatar/avatar.pnghttps://virgool.ir/@aryanmoradi74https://virgool.ir/@aryanmoradi74/how-to-prevent-nextjs-from-reloading-when-clicking-on-hyperlink-in-html-string-bc2tbvcurus4سلامیک مشکلی که بهش برخوردم این بود که وقتی سرور برای من یک html string میفرستاد، بعد رندر شدن تگ های <a> که لینک داخلی داشت وقتی کلیک میشد باعث رفرش شدن صفحه میشد و حالت وب اپلیکیشن بودن از بین میرفت.برای اینکه این مشکل رو حل کنم من جستوجو زیادی کردم و به نتیجه ای نرسیدم.بعد از حل این مشکل خواستم این مقاله رو بنویسم تا دیگران هم استفاده کنند.فرض کنید این json رو از سرور گرفتیم که توش یدونه html string هستش{ html:"<p style="text-align:center;"><strong>برای خرید گلدان مناسب این گیاه میتوانید از طریق </strong><a href="/product/2099"><span style="color: rgb(44,130,201);"><strong>این لینک</strong></span></a> <strong>اقدام کنید</strong></p><p><span style="font-size: 16px;">بونسای کاج کونیکا از درختان همیشه سبز است که به دلیل برگ های سوزنی زیبایی که دارد، بسیار محبوب واقع شده است. رشد نسبتا کندی دارد و از درختان مقاوم به تنش های محیطی است. شکل تاج آن به صورت مخروطی است و برگ های سوزنی آن کامل در هم فرو رفته اند و شکل ظاهری توپری را به درختچه می بخشند. کاج کونیکا نماد دعوت به صلح و آرامش است. هدیه دادن بونسای کاج به معنی استواری، پایداری، و آرزوی عمر طولانی برای افراد است. بونسای کاج کونیکا بسیار قابل توجه است و افراد زیادی علاقه مند به نگهداری از آن در منازل خود هستند.</span></p>" }خوب خروجی html string به این شکل هستشولی لینکی که بالا هستش به اسم "این لینک" وقتی روش کلیک میشه صفحه با رفرش شدن به صفحه جدید انتقال پیدا میکنهبرای حل این مشکل میتونیم از این تیکه کد استفاده بکنیم.import HTMLParser from 'html-react-parser' useLayoutEffect(() => { try { const section = document.getElementById("root"); const aList = section.getElementsByTagName("a") _.forEach(aList, el => { el. = (e) => { e.preventDefault() const href = el.getAttribute("href"); router.push(href) } }) } catch (e) { } }, []) return( <div id={"root"} display={'block'}> {HTMLParser(res.dara.html)} </div> )Aryan MoradiAryan MoradiSun, 26 Sep 2021 18:34:55 +0330https://virgool.ir/@aryanmoradi74/محدود-کردن-متن-به-n-خطوط-در-css-برای-زبان-فارسی-و-rtl-yt4lkfksk9ufسلام دوستانمن متوجه نبود یک قابلیت برای زبان های RTL شدم و اون قابلیت محدود کردن خط های یک نوشته در وب بودشاگر بخواهیم یک متن بلند را فقط تا دو خط نشان بدهیمبه عنوان مثال متن ما:لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.باید تبدیل بشه به:لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد ...من خیلی جستجو و تحقیق کردم حتی سایت ها معروف مثل دیجیکالا این مشکل رو با محدود کردن ارتفاع حل کردن که آخر متن ... نمیاد تا متوجه بشیم که این متن ادامه دار هستش و آخر تونستم به یک نتیجه برسم و خواستم این نتیجه گیری رو با شما به اشتراک بذارم..limitTextLines{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; } <h4 class="limitTextLines"> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </h4>و خروجی کار به این شکل میشهنمونه خروجیتوجه کنید که برای اینکه به مشکل نخورید از padding-bottom استفاده نکنید.Aryan MoradiAryan MoradiWed, 15 Sep 2021 16:28:40 +0430