Baik, buruk dan sumber daya berkembang – Beragampengetahuan

tumpukan: Html + css + ncript + next.js (react)

Target: Bangun subtitle universal yang diperluas dengan tombol “tampilkan lebih banyak” dan latar belakang gradien.

memperkenalkan

Antarmuka pengguna biasanya memerlukan konten pendek, yang dapat bervariasi berdasarkan data yang dikembalikan oleh backend. Ini terutama berlaku untuk subtitle dan deskripsi pendek, di mana desainer sering meminta interaksi “tampilkan lebih banyak”: dua baris pertama ditampilkan dan sisanya ditampilkan berdasarkan permintaan.

Namun, jika subtitle juga harus:

• Sertakan tombol “tunjukkan lebih banyak”?
• Render pada latar belakang gradien?
• Mendukung tata letak responsif dan pengaturan font dinamis?

Dalam artikel ini, kami akan mengeksplorasi beberapa pendekatan dari naif hingga canggih dan mendarat dengan solusi CSS yang elegan dan efisien. Sepanjang jalan, kami akan menimbang pertukaran kinerja dan kompleksitas pengembangan, yang akan membantu Anda memilih pendekatan yang tepat untuk proyek Anda.

buruk

Bagi banyak pengembang junior, gagasan pertama yang terlintas dalam pikiran adalah memotong teks yang diterima dari backend menjadi sejumlah karakter. Dengan cara ini, subtitle sesuai dengan dua baris dan beralih antara versi lengkap dan versi terpotong.

function App() 
  const [isSubtitleOpen, setSubtitleState] = useState(false);
  const subtitle="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, corporis?";
  const visibleSubtitle = subtitle.slice(0, 15);

  const toggleSubtitleState = () => setSubtitleState(prev => !prev);

  return (
    <>
      <button onClick=toggleSubtitleState>
        isSubtitleOpen ? subtitle : visibleSubtitle isSubtitleOpen ? 'show less' : '... show more'
      </button>
    </>
  );

Mengapa ini ide yang buruk:

• Itu mengabaikan atribut bentuk font-size,,,,, font-familyDan font-weightakan mempengaruhi panjang visual yang sebenarnya.
• Itu tidak mendukung desain responsif – jumlah karakter sangat bervariasi dalam lebar layar (mis. 1280px vs 768px).

Juga, kendala yang diberikan – tombol tertanam dalam konten dan latar belakang gradien – line-clamp Dan text-overflow: ellipsis Tidak layak. Posisi absolut tombol juga tidak ada di atas meja.

Mari kita jelajahi opsi yang lebih cerdas yang dapat menghemat waktu pengembangan dan biaya kinerja.

Sumber daya yang kaya

Mari kita tingkatkan teknologi kesadaran tata letak yang lebih cerdas.

Opsi 1: Sembunyikan Pengukuran Kontainer

Metode ini menciptakan wadah dengan gaya yang sama dengan subtitle yang terlihat. Anda menggunakan loop lokal (O(n)) atau pencarian biner (O(logN)) Temukan karakter di mana garis istirahat terjadi. Ini menggambarkan gaya dan lebar wadah.

Meskipun akurat, metode ini sangat intens. Setiap iterasi memerlukan render ulang elemen tersembunyi untuk mengukur tinggi badannya, yang mahal.

Opsi 2: Pengukuran Teks Kanvas

Lebih cepat O(1) memilih. Inilah idenya:

1. Ukur lebar teks lengkap menggunakan kanvas (dengan gaya font yang benar).
2. Perkirakan lebar karakter rata -rata.
3. Hitung karakter untuk kecocokan dua baris dikurangi lebar tombol.

Ini menghindari kembalinya DOM, tetapi menggunakan CanvasRenderingContext2D.measureText().

const measureTextWidth = (text: string, font="14px sans-serif"): number => 
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  if (!context) return 0;
  context.font = font;
  return context.measureText(text).width;
;

Contoh Penggunaan:

const showMoreSuffix = `... $staticText?.show_more.toLowerCase() ?? 'show more'`;
const [isHeaderOpen, setIsHeaderOpen] = useState(false);
const [sliceSubtitle, setSliceSubtitle] = useState(subtitle);

const textRef = useRef<HTMLSpanElement | null>(null);
const blockRef = useRef<HTMLDivElement | null>(null);

useEffect(() => 
  const updateSubtitleState = () => 
    if (subtitle && textRef.current && blockRef.current) 
  ;

  updateSubtitleState();
  window.addEventListener('resize', updateSubtitleState);
  return () => window.removeEventListener('resize', updateSubtitleState);
, [subtitle, showMoreSuffix]);

Pendekatan ini tepat dan menghindari operasi DOM yang mahal, tetapi kodenya lengkap dan rumit, yang membawa saya untuk mencari lebih lanjut.

Bagus

Karena cara peramban yang diterjemahkan, perubahan UI yang digerakkan oleh CSS lebih berkinerja. Inilah sebabnya mengapa pendekatan utama cenderung ke arah CSS, terutama clip-path Dan line-clamp.

Ide Kunci:

• menggunakan line-clamp-2 Dan overflow-hidden Batas untuk 2 baris.
• Edit bagian dengan baris kedua kustom clip-pathMeninggalkan ruang untuk tombol.
• Timpa tombol pertunjukan lebih banyak di ruang ini.

melaksanakan:

const [isHeaderOpen, setIsHeaderOpen] = useState(false);
const subtitleClasses = classNames(
  'line-clamp-2 overflow-hidden [display:-webkit-box] [clip-path:polygon(0_0,_100%_0,_100%_50%,_70%_50%,_70%_100%,_0_100%)]':
    !isHeaderOpen,
);

const handleOpenExpand = () => setIsHeaderOpen(!isHeaderOpen);

return (
  subtitle && subtitleVisible && (
    <div className="mhg-alpha-body-1-relaxed h-auto pl-0">
      buttonVisible && isTextTruncated && (
        <button
          type="button"
          className="relative text-left"
          onClick=handleOpenExpand
        >
          <span className=subtitleClasses>subtitle</span>
          !isHeaderOpen && (
            <span className="absolute bottom-0 text-nowrap [left:70%]">
              ... <u>staticText.show_more.toLowerCase()</u>
            </span>
          )
        </button>
      )
    </div>
  )
);

Dengan memotong 70% dari baris kedua dan menambahkan tombol ke kiri dengan tombol yang 70% di sebelah kiri, tata letak beradaptasi dengan baik dalam ukuran layar dan font tanpa perhitungan JS.

Metode ini:

• Menghilangkan perhitungan javascript.
• Beradaptasi dengan ukuran atau font layar apa pun.
• Sepenuhnya diterjemahkan melalui CSS untuk operasi cat dan tata letak yang lebih cepat.
• Elegan dan sangat bisa dipelihara.

hasil:

sebagai kesimpulan

Sebelum menulis artikel ini, saya menjelajahi banyak sumber daya untuk menemukan solusi kerja. Tidak menemukan apa pun, saya memutuskan untuk mendokumentasikan solusi utama untuk subtitle tombol tertanam.

Semoga ini membantu Anda menghemat waktu pengembangan dan mengoptimalkan kinerja aplikasi dalam skenario UI yang sama.

Happy Coding!