Trong quá trình phát triển UI. Tôi thường xuyên làm responsive cho trang từ PC, Tablet và Mobile. Đặc biệt là tôi đều cố gắng xử lý cho cả trường hợp khi mà user resize từ PC cho tới tận Moblie.
Tôi gặp một vấn đề đó là khi nội dung trong text-placehoder của thẻ input rất dài thì chúng ta sẽ muốn hiện thị dấu ba chấm.
Tuy nhiên ở một số trường hợp device mobile, đặc biệt là các thiết bị hệ điều hành iOS thì sẽ không nhận được thuộc tính ellipsis, cụ thể là đoạn code sau:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
useEffect(() => {
document.querySelectorAll('pre[class^="brush:"]').forEach((el) => {
const lang = el.className.replace('brush: ', '').trim();
el.className = '';
const code = document.createElement('code');
code.className = `language-${lang}`;
code.innerHTML = el.innerHTML;
el.innerHTML = '';
el.appendChild(code);
});
Prism.highlightAll();
}, [blogDetail]);
--font-xs: 12px;
--font-sm: 14px;
--font-md: 16px;
--font-md-2: 18px;
--font-md-3: 20px;
--font-md-4: 22px;
--font-lg: 24px;
--font-lg-2: 28px;
--font-xl: 30px;
--font-xxl: 32px;
--font-xxxl: 36px;
--font-4xl: 46px;
--font-5xl: 60px;
--font-heading-large: 52px;
--font-heading-medium: 40px;
Vì vậy trong trường hợp này chúng ta phải xử lý bằng JS để giả lập một thẻ div có chức năng giống với thẻ input. Mục đích chỉ là giả lập thuộc tính placehoder.
Dưới đây là cách tôi thực hiện.
Leave a Reply