Question

我试图打破分词：没有宽度的全部工作可能吗？我已经尝试了几乎每一个修复，没有任何效果（除非我放一定宽度，例如宽度：25ch;）但是当文本很长时它看起来很糟糕。这是我的代码

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
 body {
  margin: 0px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
.contentwrapper {
  margin: 0 auto;
  padding-top: 30px;
  display: table;
}
hr {
  width: 100%;
}
.card {
  max-width: 100%;
  position: relative;
  transition: box-shadow .25s;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.card .card-image {
  position: relative;
  width: 100%;
}
.card .card-content {
  text-transform: lowercase;
  padding: 20px;
  border-radius: 0 0 2px 2px;
}
.card .card-action {
  position: relative;
  background-color: inherit;
  border-top: 1px solid rgba(160, 160, 160, 0.2);
  padding: 20px;
}
span.information {
  word-break: break-all;
}

<html>

<body style="background-color: rgb(242, 242, 242)" ;>
  <div class="contentwrapper">
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/300x300">
      </div>
      <div class="card-content">
        <span class="information">
    THIS A TESTSTSTSTSTSTSTSTSTSadsssssssssssssssssssss
    </span>
      </div>
      <div class="card-action">
        EPIC
      </div>
    </div>
  </div>
</body>

</html>

编辑：图像是动态的，这就是为什么我不能为元素添加宽度：/

Answer 1

我会考虑重构你的html，所以它更简单：

JS Fiddle

<div class="contentwrapper">
  <img src="http://placehold.it/300x300">
  <span class="information">
       THIS A TESTSTSTSTSTSTSTSTSTSadsssssssiodfjiojsidfjiosjdoifjosdjfoisjdfsjdfijoisdjfsfsssssssssssssss
   </span>
</div>
<div class="card-action">
  EPIC
</div>

然后，因为您已经将display: table用于容器，所以您可以利用display: table-caption;获取文字：

span.information {
  word-break: break-all;
  display: table-caption;
  caption-side: bottom;
}

Answer 2

body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.contentwrapper{
    margin: 0 auto;
    padding-top: 30px;
    display: table;

}
.card {
    transition: box-shadow .25s;
    border-radius: 2px;
    width: min-content;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)
}
.card .card-content{
    text-transform: lowercase;
    padding: 20px;
    border-radius: 0 0 2px 2px;
}
.card .card-action{
    border-top: 1px solid rgba(160,160,160,0.2);
    padding: 20px;
}
span.information {
  word-break: break-all;
}

<div class="contentwrapper">
  <div class="card">
    <div class="card-image">
      <img src="http://placehold.it/300x300">
    </div>
    <div class="card-content">
      <span class="information">
       THIS A TESTSTSTSTSTSTSTSTSTSadsssssssiodfjiojsidfjiosjdoifjosdjfoisjdfsjdfijoisdjfsfsssssssssssssss
      </span>
    </div>
    <div class="card-action">
      EPIC
    </div>
  </div>
</div>

我建议使用width: min-content来完成此任务。

断言：没有宽度的全部工作？

2 个答案: