оправдывать текст, изменяя ширину контейнера

Я хочу, чтобы текст в моих подсказках был оправдан, но не так, как в css, делая большие пробелы между словами, но регулируя ширину контейнера.оправдывать текст, изменяя ширину контейнера

Например вот тултипе

enter image description here

Я не хочу, чтобы мои подсказки, чтобы растянуть до 1000px, если есть много текста, поэтому я максимальную ширину в 300px.

Установив максимальную ширину, я попадаю в ситуации, когда всплывающая подсказка выглядела идеально, если я немного расширил контейнер, в данном случае 15px.

Или может быть случай, когда я хотел бы точно сузить элемент текста.

Каков наилучший способ сделать это?

Лучший способ, которым я могу думать, это получить последнее слово, обернуть его в промежутке, измерить расстояние до края и, если оно меньше 50%, расширить или увеличить размер контейнера до тех пор, пока высота контейнера не изменится что означает, что линия была добавлена или удалена

источник

2014-02-20 Tomas

Вы используете JQuery (макс-ширина означает, что вы есть)? Кроме того, если вы не добавляете пробелы, то совершенно оправданный текст вряд ли, если общая длина слов в строках не заканчивается одинаковой длиной. Вы формула звучит так же, как и максимальная ширина, т. Е. Пытается получить столько слов, чтобы соответствовать длине, а затем обернуть, если нет. Или вам нужен алгоритм, который будет экспериментировать с разными длинами, чтобы найти оптимальное? – acarlon

@ Томас - вы имеете в виду вот это - http://jsfiddle.net/JrzY7/ - (используя 'inline-block' для установки ширины на основе текста до' max-width', а затем, скорее всего, '' text-align: center', если он обертывается)? –

Вычисление max-with, как вы описали [http://jsfiddle.net/36pq2/](http://jsfiddle.net/36pq2/) – verybadbug

Получите длину строки, которая вам нужна, и примените необходимый формат.

Это очень быстрый пример того, что думает я. Хотелось бы, чтобы я мог разработать, но вы знаете, много дел. Надеюсь, поможет.

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="tooltip"> 
      <p class="msg">Pork belly</p> 
     </div> 
     <div class="tooltip"> 
      <p class="msg">Pork belly synth narwhal meggings next level before they sold out Carles mlkshk chia Brooklyn</p> 
     </div> 
     <div class="tooltip"> 
      <p class="msg">Wes Anderson literally flannel Godard letterpress. Pinterest Carles artisan, PBR whatever cray cliche sustainable banjo fanny pack occupy Bushwick. +1 cred disrupt, DIY you probably haven't heard of them slow-carb blog authentic Portland </p> 
     </div> 
    </div> 
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script src="behavior.js"></script> 
</body> 
</html>

Css .container { ширина: 600px; margin: 0 auto; }

.tiny{ 
    width: 120px; 
    background: #369; 
} 

.medium{ 
    width: 360px; 
    background: #963; 
} 

.big{ 
    width: 600px; 
    background: #693; 
}

$(function() { 
$.each($('.tooltip'), function(index, val) { 
    var msgLength = $('.msg',this).html().length; 
    if (msgLength <= 20) { 
     $(this).addClass('tiny'); 
    } 
    else if(msgLength <= 100){ 
     $(this).addClass('medium'); 
    } 
    else{ 
     $(this).addClass('big'); 
    } 
}); 
});

Конечно, было бы лучше, если вы сделаете функцию, вы inmeddiatly применять после того, как де подсказке вводится в йот. :)

Просто хочу показать какое-то направление.

Скажите, что случилось.

источник

2014-02-24 18:44:16

Попробуйте это: http://jsfiddle.net/hLMkD/1/

Он получает реальную ширину строки, вводя скрытый элемент, а затем устанавливает ширину подсказки к ширине реальной строки, если она находится в определенном диапазоне, определенном delta

$(document).ready(function() { 
    $('.tooltip').each(function() { 
     var $this = $(this); 
     var delta = 20; 

     // get the real width of the string 
     var $tester = $('<div class="tester" />').appendTo('body').text($this.text()); 
     var stringWidth = $tester.width(); 
     $tester.remove(); 

     if($this.width()+delta > stringWidth) { 
      $this.width(stringWidth); 
     } 
    }); 
});

Надежда я мог немного помочь, нужно немного возился я думаю, но он должен направить вас к идее.

Я подумал, что это один, и пришел к выводу, что чистое решение CSS может быть тем, что вы ищете.Вы можете установить всплывающую подсказку на display:inline-block, поэтому потребуется только столько места, сколько нужно для текста (который решает ваш узким нижним прецедентом), а затем установите max-width по желаемой ширине.

Проверьте, пожалуйста, http://jsfiddle.net/hLMkD/1/.

источник

2014-02-24 18:55:44 markusthoemmes

Новые здесь, но были кодированы в течение 20 лет. Мой ответ относится к категории «Возможно, не делайте этого, попробуйте это вместо».

Есть ли какая-либо конкретная причина, по которой вы хотите настроить ширину, которая тщательно? Получение необходимого места для определенной части текста непросто, особенно если вам нужно поддерживать несколько браузеров и операционных систем.

Недавно мне пришлось добавлять подсказки на пользовательскую веб-страницу в Microsoft Dynamics CRM. Страница была ASP, всплывающая подсказка по умолчанию была ужасной. Некоторое время я играл с jQuery и никуда не уходил.

Я нашел tooltip.js из MenuCool и реализовал его быстро и легко. Пробовал это бесплатно, показал это моему боссу. Ей понравилось. Было 20 баксов за лицензию на один домен и все его поддомены.

После сбрасывания CSS и JS файлы в соответствующие папки и добавлять их на страницу, как это:

<script src="Scripts/tooltip.js" type="text/javascript"></script> 
<link href="Styles/tooltip.css" rel="stylesheet" type="text/css" />

я мог тогда код всплывающего окна, как это:

onmouseover="tooltip.pop(this, this.value)"

Легко и приятное всплывающее окно. Это кажется вполне настраиваемым, но я сам этого не беспокоился.

источник

2014-03-02 20:54:27 WizzleWuzzle

Почему голосование? Поблагодарили бы за отзыв. – WizzleWuzzle

Этот ответ вообще не пытается решить вопрос и даже не дает веских оснований «не делать этого»: существует несколько методов (как показывают другие ответы) определения ширины по сравнению с приемлемый диапазон систем. OP также предположительно имеет систему всплывающих подсказок: тратить больше половины поста на платный плагин для всплывающих подсказок, который вы признаете, что не изучил полностью вне темы. Предложение о том, как всплывающие подсказки переменной ширины могут повредить пользовательский интерфейс, или объяснение того, как этот или какой-либо другой плагин поможет решить этот вопрос, значительно улучшит ответ. –

Спасибо Брайан. Определение соответствующего количества пикселей, необходимых для размещения данного блока текста, чрезвычайно сложно, даже если известны операционная система и браузер. Мой опыт не в js, я занимался этим днем и был рад найти инструмент, который означал, что я мог бы перестать возиться. Я буду более осторожен в публикации и постараюсь дать лучшие предложения в будущем. – WizzleWuzzle

Fiddle: http://jsfiddle.net/aslancods/jbGc6/7/

/* css */ 
    body { 
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
      font-size: 12.6px; 
     } // to make font proper 


    .tool-tip { 
      display: inline-block; 
      word-break: break-all; 
     } // tool-tip set to inline-block, so that it wraps text we can calculate text width 

    /* tip-span class is added after setting width to tooltip */ 
    .tip-span:after { 
       content: " " 
      } 
    .tip-span:last-child:after { 
       content: "" 
      } 

<div class="tool-tip" id="tip" > 
    Maecenas ultricies dolor id fringilla ornare. 
    Vestibulum quis semper quam, 
</div> 
<div class="invisible" id="invisible"></div> 

    /* JS */ 
    //get text inside tool-tip 
    var arr = $('.tip')[0].innerHTML.split(/\s+/); 

    //wrap each word with span and append to tool-tip 
    for(i=0; i< arr.length; i++ ) { 
     html += "<span>"; 
     html += arr[i]; 
     html += "</span>"; 
    } 
    $('.tip')[0].innerHTML = html; 


    // len = no: of words 
    // get total width of text by calculating total tool-tip width 
    var tip_width = $('.tip').width(); 

    // find by which number, tip_width is divisible. it is the no of lines or no of rows of text 
    // calculate width 
    // width = (tip_width + (no:of words * (width taken by a space)))/no: of rows 
    for(i=2; i< len; i++) { 

     if((tip_width % i) == 0){ 
      setWidth = (tip_width + (len * spaceWidth))/i;  
      if(setWidth <= 300) { // rows will choosen if it is lesser than 300 
       console.log(i) 
       break; 
      } 
     } 

    } 

    //set width to tool tip 
    tip.css({ 'width': setWidth+'px' });

источник

2014-03-02 21:25:44 sudhnk

оправдывать текст, изменяя ширину контейнера

ответ

Смежные вопросы