我想在Polymer中使用flexbox来创建div中的表。 但主要的问题是,当我改变计算器div的大小时,“细胞”由于其内部的内容而挤压。在下面的示例中,尝试调整浏览器窗口的大小。如何在仍包装文本的同时使其遵循由flex定义的大小作为第一优先级?
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
由于
干杯
答案 0 :(得分:0)
将此添加到border
课程应该可以解决问题。
word-break: break-word;
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src='webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='polymer/polymer.html'>
<link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
word-break: break-word;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'base-page'
});
});
</script>
<base-page></base-page>
</body>