Question

我需要在其他文本的中间插入一个内联块。

块中的文本应始终换成两行（除非只有一个单词）。

内联块的内容未知。宽度应根据内容改变。

示例：

我的代码：

export default class Card extends Component {

  constructor(props) {
    super(props);
    this.state = {
      swipeEnabled: true,
      scrollEnabled: true  // both of them should initially be possible I assume
    };  
  }

  componentWillMount() {
    this.pan = new Animated.ValueXY();

    this.cardPanResponder = PanResponder.create({
      onMoveShouldSetPanResponder = this.onMoveShouldSetPanResponder,
      onPanResponderGrant = this.onPanResponderGrant,
      onPanResponderMove = this.onPanResponderMove,
      onPanResponderRelease = this.onPanResponderRelease
    })
  }

  render() {

    ...

    return (
      <Animated.View
        {...this.cardPanResponder.panHandlers}
        style={[animatedStyle]}>
        <View>
          <GridProfile
            scrollEnabled={this.state.scrollEnabled}
            setSwipeEnabled={this.setSwipeEnabled}
          >
        </View>
      </Animated.View>
    )
  }

  setSwipeEnabled = (isEnabled) => {
    this.setState({
      swipeEnabled: isEnabled
    });
  }

  onMoveShouldSetPanResponder = (evt, gestureState) => {

    // If swiping is disabled this should return false
    if (!this.state.swipeEnabled) {
      return false;
    }
    return (Math.abs(gestureState.dx) > Math.abs(gestureState.dy))
  }

   onPanResponderGrant = (evt, gestureState) => {
     // disable scrolling when a gesture has been granted
     this.setState({
       scrollEnabled: false
     });
   }

   onPanResponderRelease = (evt, gestureState) => {
     // This might need to be changed to re-enable scrolling to after your animation is finished?
     this.setState({
       scrollEnabled: true
     });
   }
}

div.main {
	font-size: 30px;
	padding: 30px;
	width: 630px;
}

div.two-lines {
	display: inline-block;
    font-size: 40%;
    height: 27px;
    background: #35b1e6;
    padding: 10px;
    color: #6df0ff;
    vertical-align: middle;
}

/* This needs to go */
div.two-lines:first-of-type {
	width: 194px;
}

div.two-lines:nth-of-type(2) {
	width: 39px;
}

Answer 1

一种 hacky 方法是复制文本（使用data属性），然后始终将主文本强制为一行，因此它将定义主宽度，然后使用复制的文本仅占用50 ％的宽度，您将获得两行几乎相同的宽度：

div.two-lines {
  display: inline-block;
  padding: 10px;
  margin:5px 0;
  color: #6df0ff;
  position:relative;
  height:40px;
}

div.two-lines::before {
  content: attr(data-text);
  opacity:0;
}
div.two-lines::after {
  content: attr(data-text);
  position:absolute;
  padding:10px;
  top:0;
  left:0;
  width:55%; /*a litte bigger than 50% to avoid 3 lines */
  background: #35b1e6;
}

<div class="two-lines" data-text="INLINE-BLOCK, WHICH CONTAINS TWO EQUALLY LONG LINES."></div>
<div class="two-lines" data-text="some more text here"></div>
<div class="two-lines" data-text="a very long long long long long long long long long long long long long long long long  text here"></div>
<div class="two-lines" data-text="SHORT ONE"></div>
<div class="two-lines" data-text="one"></div>

此方法的唯一缺点是，由于文本全角，因此右侧将有多余的空间。我们只需要找到一种方法来摆脱它，以便能够将其包含在文本中。

另一种引人入胜的方式（仍然很笨拙）是依靠CSS网格，而您无需复制文本。您必须将文本的宽度设置为50％。诀窍是，此宽度将基于文本内容（是有点复杂）

定义的轨道宽度

div.two-lines {
  display: inline-grid;
  margin:5px 0;
  color: #6df0ff;
  position:relative;
}

div.two-lines::before {
  content: attr(data-text);
  background: #35b1e6;
  padding:10px;
  width:55%;
}

<div class="two-lines" data-text="INLINE-BLOCK, WHICH CONTAINS TWO EQUALLY LONG LINES."></div>
<div class="two-lines" data-text="some more text here"></div>
<div class="two-lines" data-text="a very long long long long long long long long long long long long long long long long  text here"></div>
<div class="two-lines" data-text="SHORT ONE"></div>
<div class="two-lines" data-text="one"></div>

强制插入两行

1 个答案: