Making the address

Emogi implementation ideas

  • The page starts with a Textarea input box and a list of emojis by clicking the Publish button
  • The list of emojis is actually each image in place of an emoji and here I’ve used six images instead of six emojis
  • Clicking on each individual emoji adds attributes to the deserved emoji transfer to the input box such as [Kneel]
  • Then click on the release of the regular match for each emoji attribute to replace the deserved picture path
  • I ran into a problem here, how to preserve the newline whitespace character of the text input field,
  • I thought about matching newline whitespace with a re and then replacing it, but found a CSS property that worked particularly well with White-space: Pre

White-space is a CSS property that I find particularly useful. I haven’t paid much attention to it before

  • White-space :normal By default, white space is ignored by the browser. Normal means to merge Spaces. Multiple adjacent Spaces are merged into a single space. The whitespace here refers to the value whitespace, including Spaces, tabs and other whitespace characters. For the convenience of writing, “space” is used to represent whitespace.

White – space: nowrap non-breaking

White-space: Nowrap, like normal, also incorporates Spaces, but does not wrap according to the container size. White-space: Nowrap causes text not to wrap. It is often used with overflow and text-overflowCopy the code

White-space :pre keeps Spaces without newlines

White-space: The pre is used to preserve the whitespace in the source code, and the number of Spaces is counted as several Spaces, while the newline only recognizes the source line and <br/> tags.Copy the code

White-space :pre-wrap keeps space newlines

White-space :pre-wrap preserves whitespace and ADAPTS to container boundaries, in addition to line breaks and <br/> line breaks in source code. The difference between white-space:pre-wrap and white-space:pre is that it ADAPTS to the boundaries of the container for line wrapping.Copy the code

White-space :pre-line merges space newlines

White-space :pre-line merges whitespace. White-space :pre-wrap is the same as white-space:pre-wrap. White-space :pre-wrap is the same as <br/> and <br/>.Copy the code
White space attribute Source space Source line A newline Container boundary newline
normal merge ignore A newline A newline
nowrap merge ignore A newline Don’t wrap
pre keep keep A newline Don’t wrap
pre-wrap keep keep A newline A newline
pre-line merge A newline A newline A newline