标题文本从包装器转义

Question

在移动设备上，标题文本从div包装器转义。我怎样才能防止它呢？只有剩下2个字符时才会发生这种情况。如果可能，只使用纯CSS (如果需要，使用jQuery)。

​

​

HTML (Laravel-Blade)

@section('content')
@if($builds)
    @foreach($builds as $result)
        <div class="col-md-4">
            <div class="builds">   
                <img src="{{ $result->icon }}" class="img-responsive" alt="Hero icon" />
                <div class="text">
                    <h2>{{ $result->name }} - {{ $result->build }}</h2>
                    <i><span class="usercolored">{{ $result->created_by }} </span>,{{ date('d-m-Y', strtotime($result->date)) }} <br /> {{ $result->views }} zobrazení</i><br />
                    <button class="btn btn-primary btn-md">Přejit na build</button>
                </div>               
            </div>
        </div>
    @endforeach
@else
    <p>Nic nenalezeno</p>
@endif
@endsection

CSS

.builds {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    height: 191px;
    margin-top: 10px;
}

.builds h2{
    margin: 0;
}

.builds:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.builds img {
    width: 171px;
    height: 191px;
    float: left;
}

.builds .text {
    margin-left: 180px;
}

Answer 1

.builds h2{
  word-wrap: break-word;
  //word-break: break-all;
}

我已经为您创建了一个示例，以了解它是如何工作的。对于一个相对较小的容器中不适合的超长单词来说，示例是很好的。

​

div {
   width: 100px;
   border: 1px solid red;
}

/* word-wrap: break-word recently changed to overflow-wrap: break-word. */
.overflow {
  /* A long word/string will break in random places.
  A hyphen character will not be inserted. */
  overflow-wrap: break-word;
}

/* A very long word WILL NOT start at the point it should start. 
It will be wrapped to next line and then being broken. */
.word-wrap {
  word-wrap: break-word;
}

/* Avery long word starts at the point it 
should start and it is being broken. */
.word-break {
  word-break: break-all;
}

Normal: 
<div>I am a text that 0123456789012345678901234567890123456789</div><br>

overflow-wrap: break-word; 
<div class="overflow">I am a text 000001234567890123456789</div><br>

word-wrap: break-word;
<div class="word-wrap">I am a text 000001234567890123456789</div><br>

word-break: break-all;
<div class="word-break">I am a text 000001234567890123456789</div><br>

​

Answer 2

尝尝这个

word-break: break-all;