Question

我有些文本可以在有人单击时进行编辑。然后将span替换为input，当有人点击进入时，它又回到了跨度。一切都很好，而且效果很好。

但是，当文本溢出时，我遇到了一个问题。输入的宽度为350px，当用户输入大量文本时，您只会看到文本输入的结尾。那很好。但是，当您按下Enter键并再次显示跨度时，您只会看到文本的结尾。如果刷新页面，则可以看到文本的开头，并且出现了省略号。

我不知道为什么会这样。关于修复的任何想法或想法吗？

我正在使用React。

相关代码： https://gist.github.com/elie222/cd86b4a8b41f5ca022fa046d716a7527

import * as React from 'react'
import styled from 'styled-components'

const Container = styled.div<{ light?: boolean }>`
  display: inline-block;
  /* when using inline-block and overflow: hidden the text rises unless using v align bottom */
  vertical-align: bottom;
  margin-left: 8px;
  font-size: 18px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${props => (props.light ? 'var(--black)' : '#fff')};
`

const Title = styled.span`
  font-weight: 300;
  cursor: pointer;
  /* makes things look weird on small screen */
  /* white-space: nowrap; */
`

const TitleEdit = styled.input`
  font-family: Exo;
  font-size: 18px;
  color: var(--light-grey-blue);
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  width: 350px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  ::placeholder {
    color: var(--light-grey-blue);
    opacity: 1; /* Firefox */
  }
`

export interface EditableTitleProps {
  title?: string
  updateTitle: (title: string) => void
  readOnly: boolean
  containerClass?: string
  placeholder?: string
  light?: boolean
  preText?: string
}

interface State {
  editting: boolean
}

export default class EditableTitle extends React.Component<EditableTitleProps, State> {
  state = {
    editting: false,
  }

  titleEdit: React.RefObject<HTMLInputElement> = React.createRef()

  private updateTitle() {
    if (this.state.editting) {
      this.props.updateTitle(this.titleEdit.current!.value)
      this.toggleEditting()
    }
  }

  private onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.charCode === 13) this.updateTitle()
  }

  private onBlur = () => this.updateTitle()

  private toggleEditting = () => {
    if (this.props.readOnly) return

    this.setState((state: State) => ({
      editting: !state.editting,
    }))
  }

  public render() {
    return (
      <Container className={this.props.containerClass} light={this.props.light}>
        <div>
          {this.props.preText && <span>{this.props.preText}: </span>}
          {this.state.editting ? (
            <TitleEdit
              ref={this.titleEdit}
              placeholder={this.props.title}
              onKeyPress={this.onKeyPress}
              onBlur={this.onBlur}
              defaultValue={this.props.title}
              autoFocus
            />
          ) : (
            <Title onClick={this.toggleEditting}>{this.props.title}</Title>
          )}
        </div>
      </Container>
    )
  }
}

但是，父容器也可能会影响最终的HTML / CSS输出。

以下是一些不同行为的图片

以光标结尾选择的输入：

问题范围元素不显示文本开头：

以光标开头选择的输入：

将光标移到输入的开头后的跨度视图：

跨度显示文本结尾，但隐藏开始

0 个答案: