Hướng dẫn css split string - chuỗi chia css
|
Đã hỏi 7 năm, 6 tháng trước 7 years, 6 months ago 7 years, 6 months ago Show
Đã xem 5k lần 5k times 5k times 1 Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more. Nếu tôi có chuỗi như "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 0, tôi muốn hiển thị chuỗi đó như "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 1 có thể làm điều đó với CSS không? Về cơ bản, tôi muốn thêm không gian trước mỗi chữ cái viết hoa và tự hỏi là có thể làm với CSS. Hỏi ngày 6 tháng 4 năm 2015 lúc 8:01Apr 6, 2015 at 8:01Apr 6, 2015 at 8:01 Sreginogemohsreginogemohsreginogemohsreginogemoh 9.36727 Huy hiệu vàng87 Huy hiệu bạc145 Huy hiệu Đồng27 gold badges87 silver badges145 bronze badges27 gold badges87 silver badges145 bronze badges 6 Câu trả lời ngắn gọn là không, hoặc chắc chắn không ở thời điểm hiện tại. Bạn sẽ cần một chút JavaScript để làm điều này. Cách dễ nhất là @robw trả lời về câu hỏi tràn ngăn xếp này. Câu trả lời của Rob là "HiMyNameIsBob".split[/[?=[A-Z]]/]; // -> "Hi My Name Is Bob" Vì vậy, đối với tình huống của bạn, nó sẽ là "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" Điều này sẽ trả về một mảng với các từ được chia ra, nếu bạn cần một chuỗi thẳng thì bên dưới nên làm điều đó: "StringToSplit".split[/[?=[A-Z]]/].join[" "]; Đã trả lời ngày 6 tháng 4 năm 2015 lúc 8:17Apr 6, 2015 at 8:17Apr 6, 2015 at 8:17 Gần đây tôi đã xuất bản một bài viết về các phông chữ biến hoạt hình với sự trợ giúp của thư viện JavaScript. Một vài người đã hỏi về ý nghĩa tiếp cận của điều này, vì vậy trong bài viết này, chúng ta sẽ xem xét lý do tại sao việc chia một chuỗi văn bản có thể có vấn đề từ quan điểm tiếp cận và những gì chúng ta có thể làm để đảm bảo rằng văn bản chia tách đó là Có thể truy cập cho mọi người. Tóm lại.js Tóm tắtHãy nói rằng bạn có một từ, một tiêu đề, một đoạn văn hoặc một câu và bạn muốn thay đổi phong cách trên cơ sở mỗi chữ cái. Cách chia tách.js hoạt động là nó kết thúc từng ký tự [bao gồm cả các ký tự khoảng trắng] trong thẻ "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 2 và thêm các thuộc tính khác nhau cho phép bạn dễ dàng nhắm mục tiêu và thao tác từng cái hơn. Nó cũng kết thúc từng từ trong khoảng thời gian của nó, vì vậy bạn cũng có thể nhắm mục tiêu riêng chúng. Có nhiều khả năng sáng tạo! Bản demo codepen sau đây chứa một ví dụ về việc chia tách.js trong hành động, sử dụng các thuộc tính tùy chỉnh trong CSS để tính giá trị màu cho mỗi chữ cái. Trong bài viết này, tôi sẽ mô tả các kỹ thuật tôi đã sử dụng để làm cho nó có thể truy cập được. Tại sao việc chia văn bản là một mối quan tâm tiếp cận?Một số người bị mù, có một phần hoặc thấy việc đọc trên web khó khăn hoặc có vấn đề vì những lý do khác nhau có thể sử dụng phần mềm đầu đọc màn hình để hỗ trợ họ điều hướng và khám phá một trang web. Trình đọc màn hình thông báo nội dung của trang web một cách tự nhiên cho người dùng. Để hiểu rõ hơn về trải nghiệm của một người sử dụng đầu đọc màn hình, tôi khuyên bạn nên xem cách người dùng đầu đọc màn hình truy cập web, một hội thảo trên web khả năng truy cập từ Tạp chí Smashing. Đây là một lý do tại sao HTML ngữ nghĩa đặc biệt quan trọng: không phải ai cũng truy cập các trang web của chúng tôi một cách trực quan, vì vậy sử dụng các phần tử HTML phù hợp với mục đích đúng đắn giúp điều hướng trang và tìm nội dung có liên quan dễ dàng hơn nhiều. Chúng tôi có thể muốn chia một chuỗi văn bản cho mục đích trình bày, nhưng thay đổi đánh dấu trong [ví dụ] một tiêu đề có thể ảnh hưởng đến cách các trình sàng lọc diễn giải văn bản và đọc lại cho người dùng. Hãy xem xét đánh dấu sau - Thẻ tiêu đề "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 3 đơn giản: Oh hello thereh2>Oh hello thereh2> Bây giờ, hãy để Lôi nhìn vào cùng một tiêu đề chia thành "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 4S: OhHelloThereh2> Với mỗi ký tự được bọc trong một thẻ riêng lẻ, một số trình đọc sách sẽ không diễn giải từng từ mà thay vào đó thông báo từng chữ cái riêng lẻ. Đây sẽ không phải là một trải nghiệm rất hữu ích cho ai đó điều hướng trang bằng trình đọc màn hình! Hành vi này không phù hợp giữa các trình đọc sách. Ban đầu tôi đã thử nghiệm điều này với VoiceOver trên Safari, không có vấn đề gì khi đọc văn bản như dự định. Tuy nhiên, những người khác bỏ qua từ phá vỡ và đọc nội dung như một từ dài duy nhất. Làm cho nó có thể truy cập với wai-ariaMay mắn thay, những mối quan tâm tiếp cận này không có nghĩa là chúng ta có thể sử dụng các thư viện tuyệt vời như SPLIT.js. Chúng ta chỉ cần đi đến một nỗ lực nhỏ hơn một chút để đảm bảo văn bản của chúng ta có thể truy cập được cho mọi người. WAI-ARIA cung cấp cho chúng tôi các thuộc tính để xác định cách trình bày các yếu tố để hỗ trợ các công nghệ. Mặc dù nó được thiết kế để giúp các trang web dễ tiếp cận hơn, nhưng nó không phải là một sự thay thế cho HTML ngữ nghĩa. Nó nên được sử dụng khi một mình HTML ngữ nghĩa là không đủ. aria-labelTrong trường hợp tiêu đề ví dụ của chúng tôi, chúng tôi có thể cung cấp một nhãn văn bản có thể truy cập cho đầu đọc màn hình với thuộc tính "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5: OhHelloThereh2 aria-label="Oh hello there"> Chỉ sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5 một mình có thể khiến một số người đọc màn hình đọc văn bản để đọc cả nhãn văn bản và nội dung. Điều này khác xa với lý tưởng - chúng tôi không muốn người dùng đầu đọc màn hình phải nghe văn bản được đánh vần cho họ sau khi nghe nhãn. Vì vậy, chúng ta cần phải ẩn nội dung bên trong phần tử từ đầu đọc màn hình mà chúng ta có thể làm bằng cách sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7. aria-hidden"StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 che giấu phần tử từ cây khả năng truy cập, vì vậy một đầu đọc màn hình sẽ bỏ qua nó. Chúng ta có thể che giấu chính yếu tố, vì sau đó, nó đã giành chiến thắng được đọc - nhưng chúng ta có thể che giấu con cái của nó. Vì vậy, chúng tôi có một lựa chọn ở đây: Chúng tôi có thể thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào mỗi "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 2 trong tiêu đề của chúng tôi: OhHel ...h2 aria-label="Oh hello there"> Hoặc, nếu điều này cảm thấy hơi tẻ nhạt, chúng ta có thể chọn nhóm tất cả trẻ em trong một khoảng thời gian khác và thay vào đó, hãy thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào đó: thay vào đó: OhHelloThereh2
aria-label="Oh hello there"> Chỉ sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5 một mình có thể khiến một số người đọc màn hình đọc văn bản để đọc cả nhãn văn bản và nội dung. Điều này khác xa với lý tưởng - chúng tôi không muốn người dùng đầu đọc màn hình phải nghe văn bản được đánh vần cho họ sau khi nghe nhãn. Vì vậy, chúng ta cần phải ẩn nội dung bên trong phần tử từ đầu đọc màn hình mà chúng ta có thể làm bằng cách sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7."StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 che giấu phần tử từ cây khả năng truy cập, vì vậy một đầu đọc màn hình sẽ bỏ qua nó. Chúng ta có thể che giấu chính yếu tố, vì sau đó, nó đã giành chiến thắng được đọc - nhưng chúng ta có thể che giấu con cái của nó. Vì vậy, chúng tôi có một lựa chọn ở đây: Chúng tôi có thể thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào mỗi "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 2 trong tiêu đề của chúng tôi: OhHel ... Hoặc, nếu điều này cảm thấy hơi tẻ nhạt, chúng ta có thể chọn nhóm tất cả trẻ em trong một khoảng thời gian khác và thay vào đó, hãy thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào đó: thay vào đó: OhHelloThereh2
aria-label="Oh hello there"> Chỉ sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5 một mình có thể khiến một số người đọc màn hình đọc văn bản để đọc cả nhãn văn bản và nội dung. Điều này khác xa với lý tưởng - chúng tôi không muốn người dùng đầu đọc màn hình phải nghe văn bản được đánh vần cho họ sau khi nghe nhãn. Vì vậy, chúng ta cần phải ẩn nội dung bên trong phần tử từ đầu đọc màn hình mà chúng ta có thể làm bằng cách sử dụng "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7. "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 che giấu phần tử từ cây khả năng truy cập, vì vậy một đầu đọc màn hình sẽ bỏ qua nó. Chúng ta có thể che giấu chính yếu tố, vì sau đó, nó đã giành chiến thắng được đọc - nhưng chúng ta có thể che giấu con cái của nó. Vì vậy, chúng tôi có một lựa chọn ở đây: Chúng tôi có thể thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào mỗi "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 2 trong tiêu đề của chúng tôi: OhHel ... Hoặc, nếu điều này cảm thấy hơi tẻ nhạt, chúng ta có thể chọn nhóm tất cả trẻ em trong một khoảng thời gian khác và thay vào đó, hãy thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7 vào đó: thay vào đó:Approach:... Sử dụng JavaScript để thêm các thuộc tính ARIA Nếu chúng tôi sử dụng Spits.js để tạo các phần tử con đó, chúng tôi có thể thêm "StringToSplit".split[/[?=[A-Z]]/].join[" "]; 2 vào mỗi từ bằng cách sử dụng vòng lặp "StringToSplit".split[/[?=[A-Z]]/].join[" "]; 3. Như tôi đã đề cập trước đó, chia tách một câu thành các từ và bọc từng câu trong một "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 2, cũng như gói mỗi ký tự. "StringToSplit".split[/[?=[A-Z]]/].join[" "]; 5 Trả về một mảng các phần tử đích, vì vậy trước tiên chúng ta cần phải lặp qua từng phần tử, sau đó lặp qua từng từ trong phần tử chia. Sau đó, chúng ta có thể kiểm tra xem phần tử có thuộc tính "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5 không và nếu chúng ta thêm "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 7: /* Loop through all split elements */Splitting[].forEach[[s]=>{/* Loop through words */ s.words.forEach[[word]=>{/* If the parent element includes `aria-label`, set `aria-hidden="true"` */if[word.parentElement.getAttribute['aria-label']]{ word.setAttribute['aria-hidden',true]}}]}] Điều này sẽ dẫn đến cấu trúc HTML một cái gì đó như thế này: Người dùng chỉ nghe thấy nội dung của thuộc tính "StringToSplit".split[/[?=[A-Z]]/]; // -> "String To Split" 5, không phải văn bản bên trong chính phần tử. Điều đó quan tâm đến các mối quan tâm tiếp cận và có nghĩa là chúng ta có thể phân chia nội dung văn bản của phần tử một cách an toàn, biết rằng nó sẽ có thể truy cập được cho tất cả mọi người.Sẽ thật tuyệt nếu chia tách.js có thể làm điều này theo mặc định, mặc dù có rất nhiều cân nhắc khác nhau để tính đến các loại văn bản khác nhau. Hiện tại có một vấn đề GitHub mở để thêm các tính năng tiếp cận.. After Splitting the text, the main node contains all the content up to the specified offset index point, and a newly created node of the same type contains the remaining text. Cảm ơn Andy Bell vì đã đăng ký giải pháp tiếp cận này trong nguồn cấp dữ liệu Twitter của tôi sau khi tôi xuất bản bài viết gốc!Làm thế nào để bạn chia văn bản trong CSS?. The split[] method returns the new array. The split[] method does not change the original string. If [" "] is used as separator, the string is split between words. Làm thế nào để bạn chia cơ thể thành các phần trong HTML?Thẻ div được gọi là thẻ phân chia.Thẻ div được sử dụng trong HTML để tạo các bộ phận nội dung trong trang web như [văn bản, hình ảnh, tiêu đề, chân trang, thanh điều hướng, v.v.].Thẻ div có cả thẻ mở [] và đóng [] và bắt buộc phải đóng thẻ.. The div tag is used in HTML to make divisions of content in the web page like [text, images, header, footer, navigation bar, etc]. Div tag has both open[. The div tag is used in HTML to make divisions of content in the web page like [text, images, header, footer, navigation bar, etc]. Div tag has both open[ ] and closing [ ] tag and it is mandatory to close the tag. |
