文本省略溢出

Question

我遇到了一些麻烦，我觉得这是一个简单的布局，可以在本地实现。

基本上我需要连续两个视图，其父级有<?php do_action( 'woocommerce_before_cart_contents' ); ?> <?php foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key ); if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) { $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key ); ?> <tr> <td> <div> <?php echo $_product-> get_categories (); ?> </div> </td> </tr> <tr class="woocommerce-cart-form__cart-item <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>"> <td class="product-remove"> <?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf( '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>', esc_url( WC()->cart->get_remove_url( $cart_item_key ) ), __( 'Remove this item', 'woocommerce' ), esc_attr( $product_id ), esc_attr( $_product->get_sku() ) ), $cart_item_key ); ?> </td> <td class="product-thumbnail"> <?php $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); if ( ! $product_permalink ) { echo $thumbnail; } else { printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); } ?> </td> <td class="product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>"> <div><?php if ( ! $product_permalink ) { echo apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;'; } else { echo apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ); } // Meta data echo WC()->cart->get_item_data( $cart_item ); // Backorder notification if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) { echo '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>'; } ?></div> <div><?php the_field('weight',$product_id); ?></div> </td> <td class="product-price" data-title="<?php esc_attr_e( 'Price', 'woocommerce' ); ?>"> <?php echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); ?> </td> <td class="product-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>"> <?php if ( $_product->is_sold_individually() ) { $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key ); } else { $product_quantity = woocommerce_quantity_input( array( 'input_name' => "cart[{$cart_item_key}][qty]", 'input_value' => $cart_item['quantity'], 'max_value' => $_product->get_max_purchase_quantity(), 'min_value' => '0', ), $_product, false ); } echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); ?> </td> <td class="product-subtotal" data-title="<?php esc_attr_e( 'Total', 'woocommerce' ); ?>"> <?php echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); ?> </td> </tr> <?php } } ?> <?php do_action( 'woocommerce_cart_contents' ); ?> 。

在第一个视图中有两个文本组件，其中一个组件在增长时必须有省略号。

我的期望：

我反而得到的是该文本组件的溢出：

justifyContent: 'space-between'

一个沙箱来玩一个例子： https://snack.expo.io/HkeFQbyvf

Answer 1

如果您将flex: 1添加到内部<View style={{ marginHorizontal: 15 }}>，则可以使用

更新了代码示例

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>AVATAR</Text>
      <View style={{ flex: 1, marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

根据评论更新

主要原因是因为内部<View style={{ marginHorizontal: 15 }}>是一个flex 行项，因此水平弯曲并需要一个宽度{{1提供。

如果要使用默认的列方向，它将无效，例如像这样：

flex: 1

Answer 2

尝试将flexShrink：1添加到第一个内部视图的样式