Question

我目前遇到一个问题，我的句子在中间中断了。我当前正在使用Material UI，并且需要手动设置不同的MUI组件的样式。以下是我遇到的问题的一个示例。我最好的方法是删除display: flex，但是这导致我的图标（在下面的示例中为正方形）停止向右浮动，这就是我想要保留的。如何解决文本问题以及将正方形保持在右侧？

.container {
  display: flex;
  word-break: break-word;
  align-items: center;
  border: 4px dotted blue;
  width: 25em;
}

.special {
  font-weight: bold;
}

.square{
  width:10px;
  height:10px;
  background-color:red;
}

<div class="container">
  This sentence is supposed to display a 
  <span class="special">   special</span>
  styled piece of text.
  <div class="square"></div>
</div>

更新：这是我想要的结果

.container2{
   border: 4px dotted blue;
   width: 20em;
}
    
.square2{
    width:10px;
    height:10px;
    background-color:red;
    float: right;
}

<div class='container2'>
    This sentence is supposed to display a <b>styled </b>piece of text. <div class='square2'></div>
</div>

Answer 1

尝试一下：这是您要寻找的答案吗？

.container {
  display: flex;
  word-break: break-word;
  align-items: center;
  border: 4px dotted blue;
  width: 25em;
}

.container .text {
  display: inline-block;
  margin: 0
}

.special {
  font-weight: bold;
}

.square{
  width:10px;
  height:10px;
  background-color:red;
}

<div class='container'>
  <p class='text'>
    This sentence is supposed to display a 
    <span class='special'>   special</span>
    styled piece of text.
  </p>
  <div class='square'></div>
</div>

Answer 2

Flex会将文本分成多个块，因为它会将文本.special的任一侧以及元素本身视为单独的子代。

将句子包装在<span>中会使flexbox将其视为单个元素。

.container {
  display: flex;
  word-break: break-word;
  align-items: center;
  border: 4px dotted blue;
  width: 25em;
}

.special {
  font-weight: bold;
}

.square{
  width:10px;
  height:10px;
  background-color:red;
}

<div class="container">
  <span>This sentence is supposed to display a <span class="special">special</span> styled piece of text.</span>
  <div class="square"></div>
</div>

Answer 3

尝试将文本包装在另一个div中，并保持弹性在容器上。

.container {
  display: flex;
  word-break: break-word;
  align-items: center;
  border: 4px dotted blue;
  width: 25em;
}

.special {
  font-weight: bold;
}

.square{
  width:10px;
  height:10px;
  background-color:red;
}

<div class="container">
    <div>
      This sentence is supposed to display a <span class="special">special</span> styled piece of text.
    </div>
  <div class="square"></div>
</div>

句子中间的单词中断-实质性用户界面

3 个答案: