Question

我有这个asp控件呈现为文本区域，并已应用一些CSS使其看起来很酷但我有一个问题，如果我有一个长标签它重叠文本框，所以有任何CSS我可以如果问题变长，添加以按下文本框？在我的表单中，我将宽度设置为50％，将文本推到2行然后重叠

import React, { Component } from 'react';

function withHoverMenu (Menu) {
  return class extends React.Component {
    componentDidMount = () => {
      this.updateMenu()
    }
    componentDidUpdate = () => {
      this.updateMenu()
    }
    updateMenu = () => {
      const { value } = this.props
      const menu = this.menu
      if (!menu) return

      if (value.isBlurred || value.isEmpty) {
        menu.removeAttribute('style')
        return
      }

      const selection = window.getSelection()
      const range = selection.getRangeAt(0)
      const rect = range.getBoundingClientRect()
      console.log(rect)
      menu.style.opacity = 1
      menu.style.top = `${rect.top + window.scrollY - menu.offsetHeight}px`
      menu.style.left = `${rect.left + window.scrollX - menu.offsetWidth / 2 + rect.width / 2}px`
    }
    menuRef = (menu) => {
      this.menu = menu
    }
    render () {
      return <Menu className="slate-rte-balloon" menuRef={this.menuRef} {...this.props} />
    }
  }
}

export default withHoverMenu;

import Menu from './menu';
import withHoverMenu from './menu-balloon';

const HoveredMenu = withHoverMenu(Menu)

class SlateRTE extends Component {
  state = {
    value: Value.fromJSON(initialValue)
  }
  onChange = ({ value }) => {
    this.setState({ value })
  }
  render() {
    return (
      <div className="slate-rte">
        <HoveredMenu value={this.state.value} onChange={this.onChange} />
        <Editor placeholder="Enter some text..." renderMark={this.renderMark} value={this.state.value} onChange={this.onChange} />
      </div>
    );
  }
  renderMark = (props) => {
    const { children, mark } = props
    switch (mark.type) {
      case 'bold': return <strong>{children}</strong>
      case 'code': return <code>{children}</code>
      case 'italic': return <em>{children}</em>
      case 'underlined': return <u>{children}</u>
    }
  }
}

Answer 1

你可以juste删除位置：绝对;在标签上将其添加到.control div：

display: flex;
flex-flow: column-reverse wrap;

如您所见：https://caniuse.com/#search=flex Flex现在无处不在。还有一些小问题，但不是我给你的属性。

标签为long时标签重叠文本框 - css

1 个答案: