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

Question

我有一些文本可以在有人点击时进行编辑。然后span用 an 替换，input当有人点击 enter 时，它会恢复为 span。一切都很好，而且效果很好。

但是，当文本溢出时，我遇到了问题。输入是 350px 宽，当用户输入大量文本时，您只会看到文本输入的结尾。那挺好的。但是当您然后按 Enter 并再次显示跨度时，您只会看到文本的结尾。如果我刷新页面，我会按预期看到带有省略号溢出的文本开头。

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

我正在使用反应。

有问题的代码： 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 输出。

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

最后用光标选择的输入：

有问题的 span 元素未显示文本的开头：

在开头用光标选择的输入：

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

标签： htmlcssreactjs