آیا بیضی در فونت ژاپنی شما در مرکز خط است؟ راه حل اینجاست.

سلام دوستان توسعه‌دهنده نرم‌افزار، آیا تا به حال با فونت‌های ژاپنی (یا فونت‌های خاص دیگر) کار کرده‌اید و با مشکلی مواجه شده‌اید که بیضی در خطوط شکسته در مرکز قرار دارد؟ به عنوان مثال، همانطور که در زیر نشان داده شده است:

کد
در اینجا 2 راه حل برای شما وجود دارد:

1. رشته را برش دهید و 3 نقطه اضافه کنید.

نکته جالب این است که فقط بیضی مرورگر این مشکل را دارد در حالی که تایپ سه نقطه به صورت دستی مشکلی ایجاد نمی کند. بنابراین، می توانیم رشته را با تعداد ثابتی از کاراکترها برش دهیم و سپس سه نقطه اضافه کنیم. با این حال، من این روش را توصیه نمی کنم. مزیت آن این است که قطعا کار خواهد کرد. اما عیب آن این است که طول هر کاراکتر متفاوت است، بنابراین اگر به تعداد کاراکترهای یکسان برش دهیم، آیتم ها طول متفاوتی خواهند داشت. این باعث می شود صفحه وب ما جذاب به نظر برسد. علاوه بر این، اگر شرط فنی برش در تعداد مشخصی از خطوط باشد، تعیین تعداد کاراکترهایی که باید متناسب با تعداد خطوط برش داده شوند، دشوار است. ناگفته نماند مسائل دیگری مانند دستگاه های مختلف، عرض صفحه نمایش متفاوت و غیره.

2. فونت بیضی را جایگزین کنید.

راه حل اینجاست

@font-face {
  // Font name, you can name it whatever you want
  font-family: 'ellipsis-font';

  // get the font locally, you can replace it with any font you want 
  src: local('Times New Roman');

  // only override the ellipsis, here is the unicode for the ellipsis
  unicode-range: U+2026;
}

.your-text-class {
  font-family: 'ellipsis-font', ... // insert your default font-family here
}

نتیجه:

کد

مزیت این روش این است که طول آن بسیار انعطاف پذیر است و می توانید آن را با -webkit-line-clamp ترکیب کنید تا تعداد خطوط را سفارشی کنید. نقطه ضعف این است که اگر دستگاه محلی کاربر فونت مورد استفاده شما را نداشته باشد، بیضی همچنان در مرکز خط ظاهر می شود.